Question

我有一个登录屏幕，我将在其中输入用户名，然后登录后进入主屏幕。

现在我要的是，一旦用户退出应用程序，然后再次打开它，它就必须显示之前输入的用户名。

我该怎么做？我正在使用react-native-router-flux进行导航。

这是我的代码：

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

export default class AsyncStorageExample extends Component {

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


  async getKey() {
    try {
      const value = await AsyncStorage.getItem('@MySuperStore:key')
      if (this.state.myKey === value) {
        Actions.dashboard();
        }
      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,
  },
});

使用这个我可以得到这样的

当我输入一些文本时，我将导航到下一个屏幕；之后，如果我退出应用程序并再次打开它，则先前的值将不会显示在TextInput中。

哪里出问题了？

Answer 1

您可以使用React Native的 AsyncStorage 组件。有关更多信息，AsyncStorage

您可以在注销时设置用户的值。

AsyncStorage.setItem('UseName', 'name of user');

在登录表单上，使用 componentWillMount（）方法从AsyncStorage中获取值。

 AsyncStorage.getItem('UserName')
                            .then((data) => {
                                if (data) {
                                   this.setState({UserName:data}) //store data in state
                                }
                            }).done();

如何在注销后存储用户名，并在下次登录时将其显示在TextInput中？

1 个答案: