React Native - 刷新屏幕

Question

我有以下应用：

主要 -> 登录 -> 收藏夹

在主屏幕上，您可以点击一个名为“收藏夹”的按钮：

1) 如果您已登录，它将显示您的收藏夹

2) 如果您没有登录，它会显示登录屏幕

假设某人没有登录并且他们登录到应用程序，这个集合是来自 API 的密钥并返回一个警告说“你现在登录了..”

登录后返回主屏幕时，如果他们点击“收藏夹”，它仍会显示登录屏幕。他们必须关闭应用程序并重新启动应用程序才能使登录生效。

确保他们不必继续登录的最佳方式是什么？

这里是主文件：

  renderView() {


    if(this.state.token != null)
    {
        var data = this.getData();
    }else{
        console.log("token " + this.state.token);
        this.refs.nav.navigator.push({
          title: "Login",
          component: Login,
          rightButtonTitle: 'Cancel',
          passProps: {nav: navigator},
          onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
        });
    }

  }


render() {
    return (

      <NavigatorIOS
          ref="nav"
          style={styles.container}
          initialRoute={{
              title: 'Home',
              component: Main,
              rightButtonTitle: this.renderIcon(),
              onRightButtonPress: () => {
                  this.renderView();
              }

          }} />

    );

  }

getData() {

  var query = urlForQueryAndPage('token', this.state.token, 1);

  fetch(query)
    .then(response => response.json())
    .then(json => this._handleResponse(json.response))
    .catch(error =>
      this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));
}

这是主文件，检查是否存在令牌，它将导航到收藏夹，否则导航到登录。

我在 Login.js 中的句柄登录：

    handleLogin(reply) {

      if(reply.body.response == 'true')
      {
          this.setServerKey(reply.body.key);
          AlertIOS.alert(
              "Login",
              "You are now signed in. Please go back to access your favourites!"
          );
      }else{

        AlertIOS.alert(
            "Login",
            "Wrong username/password. Please try again!"
        );

      }

  }

如您所见，登录只会弹出一个窗口。但我需要以某种方式刷新主屏幕，以确保在用户无需重新登录的情况下显示收藏夹。

Answer 1

登录后避免重新登录

let token;

constructor(props) {
  super(props);
  this.checkToken();
}

async checkToken() {
  try {
    const value = await AsyncStorage.getItem('@MySuperStore:token');
    if (value !== null){
      token = value;
    } 
  } catch (error) {
    // Error getItem from AsyncStorage
  }
}

renderView() {
  if(token != null) {
    var data = this.getData();
  } else {
    //re-check because constructor only run once
    this.checkToken();
    if (token) {
      We have data!! therefore we getData() and redirect to favourites page
    } else {
      this.refs.nav.navigator.push({
        title: "Login",
        component: Login,
        rightButtonTitle: 'Cancel',
        passProps: {nav: navigator},
        onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
      });
    }
  }
}

---

如果您可以以持久方式而不是 volatile 状态保存您的令牌，那么您可以检索该值并在第一次获得它后检查它。

在我看来，我有两种方法可以持久保存令牌。

1. AsyncStorage

首先，检查你的令牌是否存在于 AsyncStorage 中

try {
  const value = await AsyncStorage.getItem('@MySuperStore:token');
  if (value !== null){
    // We have data!! therefore we redirect to favourites page
  } else {
    // call getData() and handleLogin()
    // remember setItem token to AsyncStorage
    await AsyncStorage.setItem('@MySuperStore:key', token);
  }
} catch (error) {
  // Error retrieving data or setItem to AsyncStorage
}

1. Redux 和 redux-persist

您可以从 redux-persist 持久化的 redux 存储中检索令牌，但如果您想了解和实现 redux，这可能会很耗时，但这是值得的。