首先,我研究了其他帖子并找到了许多解决方案,但在 React Native Paper 中没有任何工作?
问问题
7379 次
4 回答
5
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 })}
/>
于 2019-12-17T07:14:38.120 回答
2
您可以使用方法中附带的 onBlur 和 onFocus 来TextInput
更改react-native-paper
样式。示例:放置在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 })}
/>
于 2019-12-10T09:49:34.253 回答
1
您可以将悬停事件上的额外样式添加到选定的文本区域并删除该样式 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})}}
/>
);
}
}
textinput 的样式如下所示
const styles = StyleSheet.create({
mText:{
backgroundColor: '#fff',
padding:5,
height:40,
width:300,
borderColor:"#333",
borderStyle:"solid",
borderWidth:1,
},
textFocus:{
backgroundColor: '#eee',
borderColor:"#5d05d5",
},
});
于 2019-12-10T10:08:12.110 回答
1
只需在 TextInput 标签中添加主题
<TextInput theme={{ colors: { primary: "color of your wish" } }} />
于 2020-12-12T09:15:48.333 回答