React Native Paper：当TextInput获取焦点时更改样式

Question

首先，我研究了其他帖子并找到了许多解决方案，但在React Native Paper中没有任何作用?

我需要在React Native Paper中更改TextInput Style on Focus

- Pirta Matharu

---

您可以在选定的文本区域上添加悬停事件的额外样式。 - Ajith

Answer 1

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

- user12512310

Answer 2

您可以使用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 })}
/>

- Harvey Kadyanji

Answer 3

在TextInput标签中添加主题即可。

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

- Boban Anto

Answer 4

您可以在选定的文本区域上添加悬停事件的额外样式，并在失焦时删除该样式，这可以通过使用以下状态值检查来实现。

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

});

- Ajith

Answer 5

兄弟，你可以使用 activeOutlineColor="" 来改变轮廓文本颜色以及轮廓边框的颜色。如果您想设置不同的轮廓颜色，可以使用 outlineStyle={borderWidth: 1, borderColor: ""}，任何您想要的颜色。

- Pratik

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community