如何在 React Native 中创建概述（聚焦）TextInput？答案

【问题标题】：How to create outlined (focused) TextInput in React Native?如何在 React Native 中创建概述（聚焦）TextInput？
【发布时间】：2022-07-06 19:01:44
【问题描述】：

这是我的代码：

 <View style={styles.inputView} >
          <TextInput  
            style={styles.TextInputStyleClass}
            placeholder="Email" 
            placeholderTextColor="#003f5c"
            onChangeText={text => this.setState({email:text})}/>
        </View>

这里是文本输入样式

TextInputStyleClass:{
textAlign: 'auto',
height: 50,
borderWidth: 1,
borderColor: '#c2c2c2',
borderRadius: 5 ,
backgroundColor : "#ffffff"
}

我是 React Native 应用程序开发的新手，我正在尝试文本输入概述的焦点。但是 textinput 并没有关注我上面写的代码。我也尝试过使用文本输入模式，但没有任何帮助。

如何创建 textInput 轮廓焦点？

【问题讨论】：

标签： react-native

【解决方案1】：

尝试使用组件状态。

class textInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isFocus: false };
  }
  render() {
    return (
      <TextInput
        onBlur={() => {
          this.setState({ isFocus: false });
        }}
        onFocus={() => {
          this.setState({ isFocus: true });
        }}
        style={this.isFocus ? { borderColor: 'red' } : { borderColor: 'green' }}
      />
    );
  }
}

【讨论】：

【解决方案2】：

你应该添加 mode='outlined'

<View style={styles.inputView} >
          <TextInput  
            style={styles.TextInputStyleClass}
            placeholder="Email" 
            mode='outlined'
            placeholderTextColor="#003f5c"
            onChangeText={text => this.setState({email:text})}/>
        </View>

【讨论】：