[英]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.