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

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>