设置反应原生TextInput的边框-Java 学习之路

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

我面临的问题是

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

截图如下：
Screenshot

2 回答

0
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要显示本机键盘，您需要转到模拟器菜单并断开硬件连接 . 转到硬件 - >键盘 - >连接硬件键盘，将其关闭 .
回复于 2024-05-19T06:56:58+08:00
20
要在中心设置textinput，请执行以下操作：
```
alignSelf: 'center'
```
回复于 2024-05-19T06:56:58+08:00

设置反应原生TextInput的边框

2 回答

相关问题