文本输入视图无法正确呈现

Question

作为 React Native 的初学者，我决定看看布局。我有一个像这样的组件，有一个文本输入组件和一个文本组件。

class TextView extends Component{
render(){
return(
  <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}>
  <TextInput style = {TextInputStyle.default}/>
  <Text> Hello again! </Text>
  </View>
)
}
}

在根文件 index.ios.js 上调用 TextView 组件后，输出如下所示。

如果遵循样式表，您只能看到文本，而不是文本输入。任何帮助将不胜感激。

编辑

这就是 TextInputStyle 的样子

const TextInputStyle = StyleSheet.create({
default : {
  color : 'darkgrey',
  fontSize : 14,
  backgroundColor : 'red',
  height : 20,
  width : 100,
  }
})

Answer 1

首先，您没有指定 TextInputStyle.default 中的内容，可能是覆盖了 css 样式。尝试在视图中包装 TextInput。

  <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}>
        <View>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1, width:150}}/>
        </View>
        <Text> Hello again! </Text>
    </View>

文本输入视图无法正确呈现

Text input view not render properly

stylesheet

ios

reactjs

react-native