首先,我研究了其他帖子,找到了很多解决方案,但在React Native Paper中没有任何工作?我需要在React Native Paper中更改焦点上的TextInput样式
0s7z1bwu1#
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 })} />
bttbmeg02#
您可以使用TextInput from react-native-paper附带的onBlur和onFocus方法来更改样式。示例:在render方法中放置
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 })} />
fcy6dtqo3#
您可以添加额外的风格悬停事件到选定的文本区域,并删除该风格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", }, });
ddarikpa4#
只需在TextInput标签中添加主题
<TextInput theme={{ colors: { primary: "color of your wish" } }} />
7hiiyaii5#
兄弟你可以使用activeOutlineColor="”它会改变你的轮廓文本颜色以及你的轮廓(边框)。如果你想设置轮廓颜色不同,你可以使用outlineStyle={borderWidth:1、borderColor:“"}随便你想要什么。
5条答案
按热度按时间0s7z1bwu1#
bttbmeg02#
您可以使用
TextInput
fromreact-native-paper
附带的onBlur和onFocus方法来更改样式。示例:在render
方法中放置返回函数中放置的组件
fcy6dtqo3#
您可以添加额外的风格悬停事件到选定的文本区域,并删除该风格onBlur,这可以通过使用状态值检查如下所示
下面给出了文本输入的样式
ddarikpa4#
只需在TextInput标签中添加主题
7hiiyaii5#
兄弟你可以使用activeOutlineColor="”它会改变你的轮廓文本颜色以及你的轮廓(边框)。如果你想设置轮廓颜色不同,你可以使用outlineStyle={borderWidth:1、borderColor:“"}随便你想要什么。