如何让 React Native TextInput 在屏幕切换后保留文本

Question

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

this.state = {text: ""};

我的文本输入声明：

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

我一直在尝试找到一种方法来将状态设置为在打开页面时不会重新初始化的变量，但到目前为止还没有成功。如有任何建议，我们将不胜感激！

Answer 1

使用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();
}

Answer 2

这是因为当您在某种类型的导航中离开页面时，您会触发 "componentUnmount" 并且当您返回时它会被销毁并重建。

您必须将数据存储在远离组件的地方 class。以另一个 class 为例。一个 class 只有一个实例

...

let instance = null;

class OtherClass {
  constructor() {
    if(instance) {
      return instance;
    }

    instance = this;
  }
...
}

因此，当您的用户进行输入时，将内容保存在 "OtherClass" 中，然后每次重建父组件时，您都会使用先前存储在此处的数据设置值。

每次您初始化 class 内容都不会被删除，因为它总是采用前一个实例。

希望对您有所帮助！

如何让 React Native TextInput 在屏幕切换后保留文本

How to make React Native TextInput keep text after screen change

textinput

react-native