在Focus React Native Paper上更改TextInput样式

lhcgjxsq  于 2023-04-12  发布在  React
关注(0)|答案(5)|浏览(190)

首先,我研究了其他帖子,找到了很多解决方案,但在React Native Paper中没有任何工作?
我需要在React Native Paper

中更改焦点上的TextInput样式

0s7z1bwu

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

bttbmeg02#

您可以使用TextInput from react-native-paper附带的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 })}
/>
fcy6dtqo

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

});
ddarikpa

ddarikpa4#

只需在TextInput标签中添加主题

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

7hiiyaii5#

兄弟你可以使用activeOutlineColor="”它会改变你的轮廓文本颜色以及你的轮廓(边框)。如果你想设置轮廓颜色不同,你可以使用outlineStyle={borderWidth:1、borderColor:“"}随便你想要什么。

相关问题