Как получить доступ к ключу asyncStorage на другом экране

Question

У меня есть проблема с AsyncStorage в моем приложении,

Мне нужно использовать значение хранилища имени пользователя на каком-то другом экране Теперь, когда я захожу на экран и перехожу на Начальный экран, мне нужно получить хранилище элементов и показать, как они работают, но когда выйдите из системы и удалите ключи он перемещает меня в экран входа в систему вправо, но когда обновляет приложение, он перемещает меня на домашний экран, а через 2 секунды почти перемещает меня в экран входа в систему, как этого не сделать при первом запуске приложения

вот мой код двух экранов,

Экран входа в систему

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  Text,
  TextInput,
  TouchableOpacity,
  AsyncStorage
} from "react-native";
export default class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: ""
    };
  }

  componentDidMount() {
    const login = AsyncStorage.getItem("@myApp:username");
    if (login == null) {
      this.props.navigation.navigate("Login");
    } else {
      this.props.navigation.navigate("Home");
    }
  }
  _onLogin = () => {
    let username = this.state.username;
    let password = this.state.password;
    if (username !== "" && password !== "") {
      AsyncStorage.setItem("@myApp:username", this.state.username).then(
        username => {
          this.setState({ username: username });
        }
      );
      this.props.navigation.navigate("Home");
      console.log(`username is ${username}`);
    } else {
      this.props.navigation.navigate("Login");
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#333" barStyle="light-content" />
        <Text style={{ fontSize: 28, margin: 10 }}>Login</Text>
        <TextInput
          placeholder="Username"
          onChangeText={username => {
            this.setState({ username: username });
          }}
          value={this.state.username}
          autoCorrect={false}
          returnKeyType="next"
          style={{
            padding: 10,
            margin: 15,
            borderBottomColor: "#333",
            borderBottomWidth: 1,
            width: "80%"
          }}
          editable={true}
        />
        <TextInput
          placeholder="Password"
          onChangeText={password => {
            this.setState({ password: password });
          }}
          secureTextEntry={true}
          value={this.state.password}
          autoCorrect={false}
          returnKeyType="next"
          style={{
            padding: 10,
            margin: 15,
            borderBottomColor: "#333",
            borderBottomWidth: 1,
            width: "80%"
          }}
          editable={true}
        />

        <TouchableOpacity
          style={{
            margin: 20,
            padding: 10,
            width: "70%",
            backgroundColor: "#1a73e8"
          }}
          onPress={this._onLogin}
        >
          <Text style={{ color: "#FFF", textAlign: "center", fontSize: 18 }}>
            Log In
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff"
  }
});

Главный экран

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  ImageBackground,
  Text,
  AsyncStorage,
  TouchableOpacity
} from "react-native";
export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      name: ""
    };
  }
  async componentDidMount() {
    try {
      const storedValue = await AsyncStorage.getItem("@myApp:username");
      this.setState({ name: storedValue });
      if (storedValue == null) {
        this.props.navigation.navigate("Login");
      }
      console.log(storedValue); 
    } catch (error) {
      Alert.alert("Error", "There was an error.");
    }
  }
  _onLogout = () => {
    AsyncStorage.removeItem("@myApp:username").then(
      this.props.navigation.navigate("Login")
    );
  };
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require("./assets/bg1.jpg")}
          style={{
            flex: 1,
            width: "100%",
            height: "100%"
          }}
        >
          <View
            style={{
              backgroundColor: "rgba(0,0,0,0)",
              flex: 1,
              justifyContent: "center"
            }}
          >
            <Text
              style={{
                alignSelf: "center",
                backgroundColor: "#000fff",
                padding: 10,
                color: "#fff"
              }}
            >
              {`Hello, ${this.state.name} `}
            </Text>
            <TouchableOpacity
              style={{
                margin: 20,
                padding: 10,
                width: "50%",
                backgroundColor: "#1a73e8",
                justifyContent: "center",
                alignSelf: "center"
              }}
              onPress={this._onLogout}
            >
              <Text
                style={{ color: "#FFF", textAlign: "center", fontSize: 18 }}
              >
                Log out?
              </Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

Answer 1

Вы можете создать файл js, в котором будут ваши константы. а затем в свой файл Constant.js вы можете добавить свой ключ, как показано ниже:

 export const userNameKey= '@myApp:username';

и вы можете получить доступ к этой клавише на экране, как показано ниже:

import { userNameKey} from './Constants';

и используйте это как:

const login = AsyncStorage.getItem(userNameKey);