React Native TextInput一直有黑色边框

Question

我正在使用React Native中的TextInput，如果我尝试为组件添加边框，则始终会在我的彩色边框上方出现一个黑色正方形边框。

当我移除彩色边框后，该组件看起来像这样：

这是我的代码：

<TextInput
      returnKeyType="search"
      style={searchStyle.searchInput}
      onChangeText={(text) => this.setState({text})}
      placeholder={this.state.searchText}
      onSubmitEditing={(event) => this.searchLocationSubmit(event)}
/>

const searchStyle = StyleSheet.create({
  searchInput : {
    height: 35,
    color: '#64AFCB',
    borderColor: '#64AFCB',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 200,
    marginLeft: 10,
    marginTop: 10,
    backgroundColor: 'white',
    position: 'absolute',
    zIndex: 2
  }
})

- Phil Mok

---

这可能会有所帮助 https://dev59.com/m1IG5IYBdhLWcg3w419n - kay

Answer 1

尝试移除 borderStyle: 'solid'。

- vinayr

Answer 2

接受的答案并没有真正回答你的问题。

如果您想设置TextInput的边框颜色，在React Native中似乎存在一个bug，它会覆盖TextInput上的borderColor样式，并将其设置为黑色。

为了解决这个问题，我将我的TextInput标签包装在一个View中。我将TextInput的borderWidth设置为0，然后将包装View设置为我想要在输入框上看到的边框样式。

<View style={{borderStyle: 'solid', borderWidth: 1, borderColor: '#64AFCB'}}>
     <TextInput
         placeholder="MyInput"
         style={{borderWidth: 0}}
         value={this.state.myInputValue}
      />
</View>

- Matthew Corway

Answer 3

尝试

borderWidth: 0,

而不是

borderWidth: 1,

- Mohamed Khalil