为原生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的背景是“灰色”，与视图的背景相同。我希望默认情况下它是白色的（感觉透明）。
3. 使用iOS模拟器如何调出键盘，我想设置returnKeyType并查看键盘的外观（并在onSubmitEditing上有一些代码并测试）。

截图如下：

Answer 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要显示本机键盘，您需要转到模拟器菜单并断开硬件连接。转到硬件 - ＆gt;键盘 - ＆gt;连接硬件键盘，将其关闭。

Answer 2

默认情况下，boderWidth将设置为0。因此，double Px, Py, sumRx, sumRy; do { ... 的默认设置是（顶部，右侧，底部，左侧）。

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

borderWidth : 5

Answer 3

要在中间设置文本输入，请执行以下操作：

alignSelf: 'center'

Answer 4

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

  style = {{borderBottomWidth : 1.0}}