我是 React-Native 的新手，所以我一直在学习创建登录屏幕的教程。教程中的代码已过时。我正在创建一个由几个组件组成的登录屏幕。但是，某个 TextInput 没有显示在模拟器中。这是 LoginForm1.js 中的父组件“LoginForm”:

export default class LoginForm extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      text: '' 
    }; 
  } 
 
 
  render() { 
    return ( 
      <Card> 
        <CardSection> 
          <Input 
          placeholder="user@gmail.com" 
          label="Email" 
          value={this.state.email} 
          onChangeText={text => this.setState({ text })} 
          /> 
        </CardSection> 

子组件“Input”包装在组件“CardSection”和“Card”中(这些组件通过显示 {this.props.children} 的 View 传递其 Prop ，但这是来自 Input.js 的“Input”组件:

export default class Input extends Component { 
  render() { 
    return ( 
      <View style={styles.containerStyle}> 
        <Text style={styles.labelStyle}>{this.props.label}</Text> 
        <TextInput 
          placeholder={this.props.placeholder} 
          autoCorrect={false} 
          style={styles.inputStyle} 
          value={this.props.value} 
          onChangeText={this.props.onChangeText} 
        /> 
      </View> 
      ); 
  } 
} 
 
const styles = StyleSheet.create({ 
  inputStlye: { 
    color: '#000', 
    paddingRight: 5, 
    paddingLeft: 5, 
    fontSize: 18, 
    Height: 50, 
    Width: 50, 
    flex: 2, 
  }, 

此代码不会引发任何错误，但“Input”中的 TextInput 不会显示。我在样式中给了它一些尺寸，所以不可能是这样。如果我用普通文本替换 TextInput，那么该文本标记的内容将出现在模拟器中。我错过了一些与传递 Prop 有关的事情吗？任何帮助将不胜感激，谢谢!

请您参考如下方法:

您的值被传递为 value={this.state.email}，但您的 onChangeText 正在更新 this.state.text 所以只需更改其为 value={this.state.text}。