组件未在react-native中渲染

Question

虽然我在 React 方面很有经验，但我对 React Native 还很陌生。我已经针对同一问题尝试了在 SO 中发布的几个答案，但没有一个可以帮助我解决问题。

我有应用程序组件，应用程序组件调用帐户组件。帐户组件呈现输入字段，但输入字段不会显示在 UI 中，但如果我仅在应用程序组件中添加文本（如

<Text>Hello</Text>

），它会显示在 UI 中，但我的自定义帐户组件不会显示在 UI 中。我不知道我做错了什么。

以下是组件详细信息：

应用程序.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Account from './components/Form/components/Account';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Account />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Account.js

import React, { Component } from "react";
import { StyleSheet, Text, View, Button, TextInput, ScrollView } from 'react-native';

export default class Account extends Component {
    constructor(props){
        super(props);
        this.state = {
            cardNo: "",
            amount: 0
        }
    }

    handleCardNo = no => {
        this.setState({
            cardNo: no
        });
    }

    handleAmount = amount => {
        this.setState({
            amount
        });
    }

    handleSend = event => {
        const { cardNo, amount } = this.state;
        this.setState({
            loading: true
        });
        const regex = /^[0-9]{1,10}$/;
        if(cardNo == null){

        }else if (!regex.test(cardNo)){
            //card number must be a number
        }else if(!regex.test(amount)){
            //amount must be a number
        }else{
            // const obj = {};
            // obj.cardNo = cardNo;
            // obj.amount = amount;
            // const url = "http://localhost:8080/apple"
   //          axios.post(url, obj)
   //          .then(response => return response.json())
   //          .then(data => this.setState({
   //           success: data,
   //           error: "",
   //           loading: false
   //          }))
   //          .catch(err => {
   //           this.setState({
   //               error: err,
   //               success: "",
   //               loading: false
   //           })
   //          })
            //values are valid
        }

    }

    render(){
        const { cardNo, amount } = this.state;
        return(
            <View>
                <TextInput label='Card Number' style={{height: 40, flex:1, borderColor: '#333', borderWidth: 1}} value={cardNo} onChangeText={this.handleCardNo} />
                <TextInput label='Amount'  style={{height: 40, flex:1, borderColor: '#333', borderWidth: 1}} value={amount} onChangeText={this.handleAmount} />
                <Button title='Send' onPress={this.handleSend}/>
            </View>
        )
    }
}

Answer 1

您的代码存在一些样式问题。尝试用这个改变你的渲染函数

render() {
    const { cardNo, amount } = this.state
    return (
      <View style={{ alignSelf: 'stretch' }}>
        <TextInput
          placeholder="Card Number"
          style={{ height: 40, borderColor: '#333', borderWidth: 1 }}
          value={cardNo}
          onChangeText={this.handleCardNo}
        />
        <TextInput
          placeholder="Amount"
          style={{ height: 40, borderColor: '#333', borderWidth: 1 }}
          value={amount}
          onChangeText={this.handleAmount}
        />
        <Button title="Send" onPress={this.handleSend} />
      </View>
    )
  }