为反应原生 TextInput 设置边框答案

【问题标题】：Setting a border for react native TextInput为反应原生 TextInput 设置边框
【发布时间】：2016-05-25 00:57:43
【问题描述】：

使用 React 本机 0.26，

我的组件是这样的

const Search = () => {
    return (
      <View style={styles.backgroundImage}>
        <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
      </View>
    )
}

还有我的风格：

const styles = StyleSheet.create({
  backgroundImage: {
    flex : 1,
    flexDirection: "column",
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    justifyContent: "center",
    alignItems: "stretch",
    borderRightWidth: 30,
    borderLeftWidth: 30,
    height: 50,
    borderColor: "#FFFFFF",
  }
})

我面临的问题是

边框右宽和左宽似乎没有任何效果，占位符文本只是从左边缘开始。
TextInput 的背景为“灰色”，与视图的背景相同。我希望它默认为白色，（感觉透明）。
用 iOS 模拟器如何调出键盘，我想设置returnKeyType 看看键盘的样子（并在onSubmitEditing 上有一些代码并测试）。

截图如下：

【问题讨论】：

标签： react-native react-native-text

【解决方案1】：

1 除非启用多行，否则您不能直接在 TextInput 上声明特定边框（例如，borderLeftWidth 将不起作用，除非 multiline={true} 已启用，但 borderWidth 将起作用），但您可以将 TextInput 包装在查看并为其添加边框。

inputContainer: {
  borderLeftWidth: 4,
  borderRightWidth: 4,
  height: 70
},
input: {
  height: 70,
  backgroundColor: '#ffffff',
  paddingLeft: 15,
  paddingRight: 15
}

2 你需要为 TextInput 声明一个backgroundColor。

3 要显示本机键盘，您需要进入模拟器菜单并断开硬件连接。转到硬件 -> 键盘 -> 连接硬件键盘，将其关闭。

【讨论】：

您指定的链接无效。 @nader dabit

【解决方案2】：

从react-native: 0.61.5 开始，您可以直接在TextInput 上设置borderBottomWidth。像下面的内联样式或者如果你想要单独的样式对象。

  style = {{borderBottomWidth : 1.0}}

【讨论】：

完美运行！谢谢！

【解决方案3】：

默认情况下，boderWidth 将设置为 0。因此请使用 borderWidth : 5 默认值（上、右、下、左）。

如果您想单独指定宽度，您可以选择，

style = {{
borderStartWidth : 2
borderEndWidth : 3
borderTopWidth : 1
boderLeftWidth: 2
borderRightWidth: 3
borderBottomWidth : 4
}}

【讨论】：