Как обновить состояние после обновления приложения - React Native?

Question

Я занимаюсь разработкой экрана входа в систему с простым экраном приветствия, но у меня есть некоторые проблемы с состоянием при обновлении приложения, оно все еще на экране-заставке [ Индикатор ] не разделено, Мне нужно, когда я удаляю ключ хранения, обновляю состояние загрузки в другое состояние, но оно не работает со мной: L, вы можете помочь мне об этой проблеме?

myScreens

После первого входа в систему

При обновлении приложения [двойная клавиша R] - мне нужно переместить меня в форму входа

это мой код

/ Login.js

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

  async componentWillMount() {
    await AsyncStorage.getItem("@myApp:username").then(username => {
      if (!username || username === "") {
        this.setState({
          isLoad: true
        });
      } else {
        this.setState({ username: username });
        this.props.navigation.navigate("Home");
      }
    });
  }

  _onLogin = () => {
    let { username, password } = this.state;

    if (username !== "" && password !== "") {
      AsyncStorage.setItem("@myApp:username", this.state.username).then(
        username => {
          this.setState({ username: username });
        }
      );
      this.props.navigation.navigate("Home");
    }
  };
  render() {
    if (!this.state.isLoad) {
      return (
         <View
      style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
    >
      <ActivityIndicator size="large" color="red" />
    </View>
      );
    } else {
      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"
  }
});

. / Home.js

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  ImageBackground,
  Alert,
  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");
      }
    } catch (error) {
      Alert.alert("Error", "There was an error.");
    }
  }
  _onLogout = () => {
    AsyncStorage.removeItem("@myApp:username").then(() => {
      this.setState({ name: "" });
    });
    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

Проблема в вашем componentWillMount

  async componentWillMount() {
    await AsyncStorage.getItem("@myApp:username").then(username => {
      if (!username || username === "") {
        this.setState({
          isLoad: true // This is the issue
        });
      } else {
        this.setState({ username: username });
        this.props.navigation.navigate("Home");
      }
    });
  }

Прежде всего, вам следует избегать использования componentWillMount и использовать componentDidMount, так как первое теперь устарело и не рекомендуется использовать в более новых версиях реакции.

Проблема в том, что, когда вы выходите на домашний экран после выхода из системы, вы проверяете username в AsyncStorage, но если он не определен, вы устанавливаете для состояния isLoad значение true, которое отображает ActivityIndicator. Вы должны делать isLoad, прежде чем обещание будет выполнено, если что-нибудь Если вы замените свой код на:

 componentDidMount() {
   this.setState({ isLoad: true });
   AsyncStorage.getItem("@myApp:username").then(username => {
      if (!username || username === "") {
        this.setState({
          isLoad: false // change this to False
        });
      } else {
        this.setState({ username: username, isLoad: false });
        this.props.navigation.navigate("Home");
      }
    });
  }

Вы должны увидеть экран входа в систему вместо счетчика. Надеюсь, это поможет.