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

は本当にあなたの問題を答えていない

borderWidth: 1, 

Answer 3

受け入れ答えの

borderWidth: 0, 

isteadを試してみてください。

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>