ReactNative TextInput不可见iOS

Question

我有以下剥离渲染结果:

return (
  <View style={{backgroundColor:'red'}}>
    <TextInput value={'Hello'}/>
  </View>
);

生成的TextInput在iOS中不可见,除非我指定高度,并且当在其容器中使用flexDirection:'row'时,我还需要指定其宽度.

这只发生在iOS上,Android似乎按预期工作.

有没有一种在没有固定大小的iOS中显示TextInput的方法？

当前依赖关系:

  "dependencies": {
    "react-native": "=0.18.1",
    "react-native-orientation": "=1.12.2",
    "react-native-vector-icons": "=1.1.0"
  },

iOS版:

安卓:

像这样更改渲染:

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput value={'Hello'}/>
  </View>
);

有以下结果:

iOS版:

安卓:

Answer 1

您需要为textInput定义高度.尝试:

return (
  <View style={{backgroundColor:'red'}}>
    <Text>text</Text>
    <TextInput style={{ backgroundColor: '#ededed', height: 60 }} value={'Hello'}/>
  </View>
);

或者,如果您不想在TextInput上定义高度,则可以在包含视图上定义高度,并在TextInput上定义flex:1:

<View style={{ height:60 }}>
    <TextInput style={{ flex:1, backgroundColor: '#ededed' }} />
</View>