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
  }
})

Answer 1

尝试删除borderStyle: 'solid'

Answer 2

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

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

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

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

Answer 3

尝试

borderWidth: 0,

而不是

borderWidth: 1,