类似于React-Native中TextInput的焦点样式,我试图更改textInput的underlineColorAndroid属性。
我使用的是React-Native 0.28.0版本。
当获得焦点时,该属性不会更改。我如何在获取焦点时将下划线改为其他颜色?
以下是我的示例代码:
'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 (
<View style={styles.container}>
<ScrollView>
<TextInput
placeholder="textInput"
onBlur={ () => this._onBlur() }
onFocus={ () => this._onFocus() }
style={styles.instructions}
underlineColorAndroid={this._getULColor(this.state.hasFocus)}/>
</ScrollView>
<TextInput>Some sample text</TextInput>
</View>
);
}
};
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);