2

如果用户未登录并且如果用户登录我正在尝试呈现Home组件，我正在尝试呈现Signin组件。在Signin组件上将 Storage 'isLIn'设置为'true' On Signout [from home component] 将 Storage 'isLIn'设置为'false'并且每次 React-Native App 打开时都会检查 Storage 并将 State 设置为 Storage 的值。

请看代码：

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { Scene, Router } from 'react-native-router-flux';
import Login from './login_component';
import Home from './home_component';

var KEY = 'isLIn';

export default class main extends Component {
  state = {
    isLoggedIn: false
  };

  componentWillMount() {
    this._loadInitialState().done();
  }

  _loadInitialState = async () => {
    try {
        let value = await AsyncStorage.getItem(KEY);
        if (value !== null && value === 'true') {
          this.setState({ isLoggedIn: true });
        } else {
          this.setState({ isLoggedIn: false });
        }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

  render() {
    const _isIn = (this.state.isLoggedIn===true) ? true : false;
    return (
        <Router>
          <Scene key="root" hideNavBar hideTabBar>
            <Scene key="Signin" component={Login} title="Signin" initial={!_isIn} />
            <Scene key="Home" component={Home} title="Home" initial={_isIn}/>
          </Scene>
        </Router>
    );
  }
}

我不知道为什么，但在 Storage 获得价值之前先查看渲染。根据React_Doc所说的 react-native render() 的生命周期，仅在componentWillMount()之后执行 。

我正在使用AsyncStorage来设置和删除存储，还使用​​React-Native-Router-Flux进行路由。

我已经尝试过解决方案：

4

2 回答 2

2

由于您正在做的是异步的，因此您无法告诉生命周期等待它。但是 React 提供了状态，你可以使用这些状态，例如

state = {
    isLoggedIn: false
    isLoading: true
  };

并在异步中设置状态

_loadInitialState = async () => {
    try {
        let value = await AsyncStorage.getItem(KEY);
        if (value !== null && value === 'true') {
          this.setState({ isLoggedIn: true, isLoading: false });
        } else {
          this.setState({ isLoggedIn: false, isLoading: false });
        }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

然后在您的渲染方法中，您可以放置​​一个占位符，直到您的异步任务完成

render() {
 if(this.state.isLoading) return <div> Loading... </div>
 else return...
}
于 2017-03-23T17:10:54.643 回答
0

在 componentWillMount 中调用 setState 不会触发重新渲染。componentWillMount在设置状态之后和重新渲染视图之前运行。来自 React Native 文档：

“componentWillMount() 在挂载之前立即调用。它在 render() 之前调用，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。” - https://facebook.github.io/react/docs/react-component.html#componentwillmount

_loadInitialState相反，您应该致电componentWillReceiveProps()

于 2017-03-23T17:07:40.257 回答