时间戳

首页 > 解决方案 > 如何使 React Native TextInput 在屏幕更改后保留文本

react-native - 如何使 React Native TextInput 在屏幕更改后保留文本

问题描述

我正在制作一个包含注释字段的应用程序，该字段需要在屏幕更改后保留其输入，但在您离开页面后它总是会重置。这是我的状态构造函数：

this.state = {text: ""};

还有我的 textinput 声明：

<TextInput
                    style={{
                        height: 200,
                        width: 250,
                        fontSize: 15,
                        backgroundColor: 'white',
                    }}

                    editable = {true}
                    multiline = {true}
                    numberofLines = {4}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                />

我一直在尝试找到一种方法将状态设置为在打开页面时不会重新初始化但到目前为止没有运气的变量。任何意见，将不胜感激！

标签： react-nativetextinput

解决方案

用于AsyncStorage持久化输入值。例如：

<TextInput
  style={{
    height: 200,
    width: 250,
    fontSize: 15,
    backgroundColor: 'white',
  }}
  editable = {true}
  multiline = {true}
  numberofLines = {4}
  onChangeText={(text) => { 
    this.setState({text});
    AsyncStorage.setItem('inputKey', text); // Note: persist input
  }}
  value={this.state.text}
 />

然后在 componentDidMount 中，您可以检查该值并相应地更新状态以使用旧值重新初始化。

componentDidMount() {
  AsyncStorage.getItem('inputKey').then((value) => {
    if (value !== null){
    // saved input is available
    this.setState({ text: value }); // Note: update state with last entered value
  }
  }).done();
}

推荐阅读