为React Native TextInput设置边框

Question

使用 React Native 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",
  }
})

我面临的问题是：

1. 右侧边框宽度和左侧边框宽度似乎没有任何效果，占位文本从左边缘开始。
2. TextInput 的背景色为 "灰色"，与 View 的背景色相同。 我原以为默认情况下它应该是白色的（感觉透明）。
3. 使用 iOS 模拟器如何调出键盘，我想设置 returnKeyType，并查看键盘的外观（并在 onSubmitEditing 上编写一些代码并进行测试）。

以下是截图：

- Sathyakumar Seshachalam

Answer 1

1 如果未启用多行功能，您不能在TextInput上直接声明特定的边框（例如borderLeftWidth不起作用，除非启用了multiline={true}，但borderWidth可以），但是您可以将TextInput包装在View中并为其添加边框。

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

2 您需要为TextInput声明backgroundColor。

3 要弹出原生键盘，您需要转到模拟器菜单并断开您的硬件连接。 转到Hardware -> Keyboard -> Connect Hardware Keyboard，并将其切换关闭。

- Nader Dabit

---

你指定的链接无法使用。@nader dabit - Ashok R

Answer 2

截至 react-native:0.61.5 版本，您可以直接在 TextInput 上设置 borderBottomWidth。像下面这样在内联样式中设置，或者如果您想要在单独的样式对象中设置也可以。

  style = {{borderBottomWidth : 1.0}}

- Mohammad Sadiq

---

完美运行！谢谢！ - Fernando Barbosa

Answer 3

默认情况下，边框宽度将被设置为0。因此，使用borderWidth: 5会默认为（上、右、下、左）。

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

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

- Sukshith S