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>

Answer 2

遇到了同樣的問題，但是當我從render()函數的最頂層父視圖中刪除alignItems:'center'時它呈現出來。

Answer 3

使用style={{ color: 'black' }} 。

這解決了問題。

Answer 4

當我們在 react-native 中使用 TextInput 時，默認情況下 TextInput 不會擴展以填充它可用的空間，而是我們必須添加樣式規則，即 TextInput 應該有多大。如果您沒有為 TextInput 添加樣式，則您無法出現文本輸入