更改underlineColorAndroid on Focus for TextInput in react-native

'use strict';

import React, {Component} from'react' ;

import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput,
 ScrollView
 } from'react-native';

class RNPlayground extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasFocus: false
 }
 }

 _onBlur() {
 this.setState({hasFocus: false});
 }

 _onFocus() {
 this.setState({hasFocus: true});
 }

 _getULColor(hasFocus) {
 console.error( hasFocus);
 return (hasFocus === true)?'pink':'violet';
 }

 render() {
 console.error(" this.state=");
 console.error(this.state);
 console.error("this.state.hasFocus=");
 console.error(this.state. hasFocus);

 return (
 
 
  placeholder="textInput"
 onBlur={ () => this._onBlur() }
 onFocus={ () => this._onFocus() }
 style={styles.instructions}
 underlineColorAndroid={this._getULColor(this.state.hasFocus)}/>
 
 Some sample text 
 
 );
 }
};

const styles = StyleSheet.create({
 container : {
 flex: 1,
 justifyContent:'center',
 alignItems:'center',
 backgroundColor:'#F5FCFF',
 },
 welcome: {
 fontSize: 28,
 textAlign:'center',
 margin: 10,
 },
 instructions: {
 textAlign: ' center',
 color:'#333333',
 fontSize: 19,
 marginBottom: 5,
 }

});
 
AppRegistry.registerComponent('RNPlayground', () => RNPlayground);

With Focus style for TextInput in react- Similar to native, I am trying to change the attribute underlineColorAndroid for textInput.

I am using React-Native 0.28.0

OnFocus, the attribute will not change. How to focus Change the underline to another color?

My sample code is as follows:

'use strict';

import React, {Component} from'react' ;

import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput,
 ScrollView
 } from'react-native';

class RNPlayground extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasFocus: false
 }
 }

 _onBlur() {
 this.setState({hasFocus: false});
 }

 _onFocus() {
 this.setState({hasFocus: true});
 }

 _getULColor(hasFocus) {
 console.error( hasFocus);
 return (hasFocus === true)?'pink':'violet';
 }

 render() {
 console.error(" this.state=");
 console.error(this.state);
 console.error("this.state.hasFocus=");
 console.error(this.state. hasFocus);

 return (
 
 
  placeholder="textInput"
 onBlur={ () => this._onBlur() }
 onFocus={ () => this._onFocus() }
 style={styles.instructions}
 underlineColorAndroid={this._getULColor(this.state.hasFocus)}/>
 
 Some sample text 
 
 );
 }
};

const styles = StyleSheet.create({
 container : {
 flex: 1,
 justifyContent:'center',
 alignItems:'center',
 backgroundColor:'#F5FCFF',
 },
 welcome: {
 fontSize: 28,
 textAlign:'center',
 margin: 10,
 },
 instructions: {
 textAlign: ' center',
 color:'#333333',
 fontSize: 19,
 marginBottom: 5,
 }

});
 
AppRegistry.registerComponent('RNPlayground', () => RNPlayground);

Then, your code is correct and it should work normally .
Here is working example

Please stop voting for this answer. Unfortunately, the rnplay service is no longer available, like this example. Or downvote but explain your point.< /p>