在 React Native 中从 AsyncStorage 设置 TextInput 值

Question

我已成功将我的电子邮件和密码值存储在 ReactNative 的 AsyncStorage 中。

现在，我还可以在应用程序启动时从 AsyncStorage 中获取值。

我现在正在使用Alert.alert() 显示值。

我很困惑如何在我的两个 TextInputs 中设置这些值：

1.电子邮件和 2. 密码。

我对状态有一点了解。使用状态可能是可能的。 但是怎么做呢？

知道如何动态更改或设置TextInput 中的值吗？

谢谢。

编辑

州：

state = {
    email: '',
    password: '',
    register: false,
    activity: false,
    isRemember:false,
  }



componentWillMount(){
       //To handle Remember Me :
       this._checkForRememberMe();
  }

登录成功：

this._storeRememberME();

_storeRememberME=async()=>{
     //SAVING ASYNCSTORAGE VALUE FOR REMEMBER ME : 
     Alert.alert("is Remember state >>"+this.state.isRemember);
     if(this.state.isRemember){
          await AsyncStorage.setItem('username', this.state.email);
      await AsyncStorage.setItem('password', this.state.password);  
  Alert.alert("is Remember state inside >>"+this.state.isRemember);
      await AsyncStorage.setItem('isRemember', 'yes');
   }else{
     const isRemember =AsyncStorage.getItem('rememberMe');
     if(isRemember){
      Alert.alert("Async clear "+this.state.isRemember);
       await AsyncStorage.clear();
     }
   }
  }

  // Fetch the token from storage then navigate to our appropriate place
  _checkForRememberMe = async () => {
    const isRemember = await AsyncStorage.getItem('isRemember');
    if(isRemember){

      const username = await AsyncStorage.getItem('username');
      const password = await AsyncStorage.getItem('password');

      this.state.email=username;
      this.state.password=password;
      this.state.checkedRemember=true;
      Alert.alert(""+this.state.email+""+this.state.password);

    }else{
      this.state.checkedRemember=false;
    }
  }

_handleCheck(val) {

if(val){
  this.state.isRemember=true;
}else{
  this.state.isRemember=false;
}

Alert.alert("is remember", ">>>"+val);

}

复选框如下：

<Checkbox
                onChange={(val) => this._handleCheck(val)}
                    style={{marginRight:8}}
                    checked={checkedRemember}
                    checkedColor={$primaryBlue}
                    uncheckedColor={$lightGray}
                    iconName='matMix'
                />

Answer 1

您可以在您的状态中获取一个变量并将此变量设置为您的TextInput。然后在构造函数中设置您所在州的 AsyncStorage 值。因为状态反映到视图中。因此，当您从 AsyncStorage 获得价值时，您将在 TextInput 中看到价值。

给你一个很好的例子。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Button,
  View,
  AsyncStorage
} from 'react-native';

export default class AsyncStorageExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
        myKey: null
    }
  }

  async getKey() {
    try {
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      this.setState({myKey: value});
    } catch (error) {
      console.log("Error retrieving data" + error);
    }
  }

  async saveKey(value) {
    try {
      await AsyncStorage.setItem('@MySuperStore:key', value);
    } catch (error) {
      console.log("Error saving data" + error);
    }
  }

  async resetKey() {
    try {
      await AsyncStorage.removeItem('@MySuperStore:key');
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      this.setState({myKey: value});
    } catch (error) {
      console.log("Error resetting data" + error);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Demo AsyncStorage!
        </Text>

        <TextInput
          style={styles.formInput}
          placeholder="Enter key you want to save!"
          value={this.state.myKey}
          onChangeText={(value) => this.saveKey(value)}
          />

        <Button
          style={styles.formButton}
          onPress={this.getKey.bind(this)}
          title="Get Key"
          color="#2196f3"
          accessibilityLabel="Get Key"
        />

        <Button
          style={styles.formButton}
          onPress={this.resetKey.bind(this)}
          title="Reset"
          color="#f44336"
          accessibilityLabel="Reset"
        />

        <Text style={styles.instructions}>
          Stored key is = {this.state.myKey}
        </Text>


      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 30,
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  formInput: {
    paddingLeft: 5,
    height: 50,
    borderWidth: 1,
    borderColor: "#555555",
  },
  formButton: {
    borderWidth: 1,
    borderColor: "#555555",
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    marginTop: 5,
  },
});

AppRegistry.registerComponent('AsyncStorageExample', () => AsyncStorageExample)