Как изменить цвет границы ввода текста в собственном приложении реакции

Question

Как я могу изменить цвет границы или как добавить или изменить стиль в поле ввода текста в реагировать родной, когда поле ввода текста сфокусировано. (для андроида)

Answer 1

Используйте приведенный ниже код, который помогает изменить цвет границы реагирующего нативного приложения.

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Remove TextInput Component Bottom Underline in React Native
        </Text>

        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 1,  marginBottom: 20 }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'red', borderWidth: 1,  marginBottom: 20 }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{ height: 40, width: "95%", borderColor: 'blue', borderWidth: 1,  marginBottom: 20 }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}

Answer 2

Вы можете использовать onFocus и onBlur для выполнения работы

state: {
    isFocused: true
}

 handleFocus = () => this.setState({isFocused: true})

 handleBlur = () => this.setState({isFocused: false})

 <TextInput
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         style={[//Your Styles, {
             borderBottomColor: this.state.isFocused
                 ? 'black'
                 : 'red',
             borderBottomWidth: 1,
         }]}
     />