在 Focus React Native Paper 上更改 TextInput 样式

Question

首先，我研究过其他帖子并找到了很多解决方案，但在 React Native Paper 中没有任何效果？

我需要在 React Native Paper 中更改焦点上的 TextInput 样式

Answer 1

您可以使用 react-native-paper 方法中 TextInput 附带的 onBlur 和 onFocus 来更改样式。例子：放在 render 方法中

const { isActive } = this.state;
const customStyle = isActive ? styles.customText : {};

放置在return函数中的组件

<TextInput
    label='Email'
    value={this.state.text}
    style={customStyle}
    onFocus={() => this.setState({ isActive: true, })}
    onBlur={() => this.setState({ isActive: false, })}
    onChangeText={text => this.setState({ text })}
/>

Answer 2

您可以将悬停事件的额外样式添加到选定的文本区域并删除该样式的模糊，这可以通过使用下面给出的状态值检查来实现

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",
  },

});

Answer 3

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 })}
/>

Answer 4

只需在 TextInput 标签中添加主题

<TextInput theme={{ colors: { primary: "color of your wish" } }} />

在 Focus React Native Paper 上更改 TextInput 样式

Change TextInput Style on Focus React Native Paper

android

reactjs

react-native

react-native-android

react-native-paper