为 React Native TextInput 设置边框 [英] Setting a border for react native TextInput

问题描述

使用 React Native 0.26，

Using 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 和测试上有一些代码).

1. The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.
2. The background of TextInput is "grey" its the same as the View's background. I was expecting it to be white by default, (Feels transparent).
3. With iOS simulator how to bring up the keyboard, I would like to set returnKeyType and see how the keyboard looks (and have some code on onSubmitEditing and test).

截图如下:

推荐答案

1 除非启用了多行，否则不能直接在 TextInput 上声明特定边框(例如 borderLeftWidth 将不起作用，除非 multiline={true} 已启用，但 borderWidth 将起作用)，但您可以将 TextInput 包装在 View 中并为其设置边框.

1 You cannot declare a specific border directly on the TextInput unless multiline is enabled (For example borderLeftWidth will not work unless multiline={true} is enabled but borderWidth will work), but you can just wrap the TextInput in a View and give it a border.

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

2 您需要为 TextInput 声明一个 backgroundColor.

2 You need to declare a backgroundColor for the TextInput.

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

3 To make the native keyboard show up, you need to go to the simulator menu and disconnect your hardware. Go to Hardware -> Keyboard -> Connect Hardware Keyboard, toggle it off.

这篇关于为 React Native TextInput 设置边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！