[英]Change TextInput Style on Focus React Native Paper
const { isActive } = this.state;
const customStyle = isActive ? styles.customText : {};
<TextInput
label='Email'
value={this.state.text}
style={customStyle}
onFocus={() => this.setState({ isActive: true, })}
onBlur={() => this.setState({ isActive: false, })}
onChangeText={text => this.setState({ text })}
/>
您可以使用来自react-native-paper
的TextInput
附带的 onBlur 和 onFocus 方法来更改样式。 例子:被放置在render
方法中
const { isActive } = this.state;
const customStyle = isActive ? styles.customText : {};
放置在返回函数中的组件
<TextInput
label='Email'
value={this.state.text}
style={customStyle}
onFocus={() => this.setState({ isActive: true, })}
onBlur={() => this.setState({ isActive: false, })}
onChangeText={text => this.setState({ text })}
/>
您可以将悬停事件上的额外样式添加到所选文本区域并删除该样式 onBlur,这可以通过使用状态值检查来实现,如下所示
class Myclass extends Component {
constructor(props) {
super(props);
this.state = {
focus : false,
name : ''
}
}
render() {
return (
<TextInput
style={[styles.mText,this.state.focus? styles.textFocus : null]}
placeholder=""
onChangeText={(value) => this.setState({ name:value })}
value={this.state.name}
onFocus={()=>{this.setState({focus:true})}}
onBlur={()=>{this.setState({focus:false})}}
/>
);
}
}
下面给出了文本输入的样式
const styles = StyleSheet.create({
mText:{
backgroundColor: '#fff',
padding:5,
height:40,
width:300,
borderColor:"#333",
borderStyle:"solid",
borderWidth:1,
},
textFocus:{
backgroundColor: '#eee',
borderColor:"#5d05d5",
},
});
只需在 TextInput 标签中添加主题
<TextInput theme={{ colors: { primary: "color of your wish" } }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.