为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. 边框右宽和左宽似乎没有任何影响，占位符文本仅从左边缘开始。/li> 并查看键盘的外观（并在 和test)./li>上有一些代码

Answer 1

默认情况下，boderWidth将设置为0。因此使用 默认值（Top，Right，Bottom，Left）。

如果您想单独对齐宽度，

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

Answer 2

从 开始，您可以直接在textInput上设置 。像下面的内联样式或如果你想要在单独的样式对象。

  style = {{borderBottomWidth : 1.0}}

Answer 3

1除非启用多行（例如，除非启用 ，否则 将不起作用，但 将起作用），否则您不能直接在TextInput上声明特定的边框，但是您可以将TextInput包装在视图中并为其提供边框。

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

2您需要为TextInput声明一个 。

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