ReactNative TextInput 不可见 iOS答案

【问题标题】：ReactNative TextInput not visible iOSReactNative TextInput 不可见 iOS
【发布时间】：2016-05-07 07:47:06
【问题描述】：

我有以下精简的渲染结果：

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：

安卓：

【问题讨论】：

标签： ios react-native

【解决方案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>

【讨论】：

是的，我知道这样做会有效。所以不可能像其他元素一样只占用可用空间？
iOS 中没有。唯一的解决办法是给容器增加一个高度，给TextInput增加一个flex:1。我已经更新了我的代码以显示这一点。
背景颜色可能需要 '#ededed' 而不是 'ededed'。
@NaderDabit 这个简单的解决方案效果很好。你拯救了我的一天
谢谢...为我节省了很多时间

【解决方案2】：

遇到了同样的问题，但是当我从 render() 函数的最顶层父视图中删除 alignItems:'center' 时，它呈现了。

【讨论】：

【解决方案3】：

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

这样就解决了问题。

【讨论】：

【解决方案4】：

当我们在 react-native 中使用 TextInput 时，默认情况下，TextInput 不会扩展以填充可用的空间，而是我们必须添加样式规则，即 TextInput 应该有多大。如果您没有为 TextInput 添加具有高度的样式你不能出现TextInput

【讨论】：