重定向不适用于componentWillMount()react-native-router-flux

时间:2018-12-17 07:16:41

标签: react-native react-navigation react-native-router-flux

componentWillMount() {
    var user = UserService.findAll();
    if (user.length > 0) Actions.home();
  }

其中“ home”是我的Scene中的router.js键。

另一方面

    onButtonPress() {
        var user = UserService.findAll();
        if (user.length > 0) Actions.home();
      }

像魅力一样工作!

我的router.js

const RouterComponent = () => {
  return (
    <Router showNavigationBar={false}>
      <Stack key="root">
        <Scene key="auth" hideNavBar={true}>
          <Scene key="login" component={Login} />
        </Scene>

        <Scene key="home" component={Home} hideNavBar={true}/>
        <Scene key="pdf" component={Pdf} hideNavBar={true} />
      </Stack>
    </Router>
  );
};

export default RouterComponent;

2 个答案:

答案 0 :(得分:2)

on道具帮了我大忙

我需要条件导航,因此我将successfailure属性与要导航的场景名称一起使用

我在下面发布我的代码,希望它对某人有帮助

<Scene
    key="login"
    component={Login}
    on={() => UserService.findAll().length > 0}
    success={()=>
       Actions.replace("home")
    }  
    failure="login"
/>

答案 1 :(得分:0)

好的,我可以假设您正在尝试在UserService中获取或检查本地存储中的用户数据。我建议不要使用生命周期挂钩componentWillMount来阻止组件渲染或“挂载”。相反,您可以在ActivityIndicator查找用户(由状态控制)时呈现UserService.findAll(),因为您不希望在UserService完成用户查找过程之后才呈现组件。 >

类似的东西

在构造函数中,分配一个值,该值将用于呈现ActivityIndicator或组件(我假设使用login组件)。例如,将其称为searching

// in your constructor
this.state = {
  searching : true;
}

// assuming it is an async function
async componentWillMount(){
  var user = await UserService.findAll();
  if (user.length > 0) {
    Actions.home({type : ActionConst.REPLACE}); // no need to update the state here as we will navigate to another screen resetting the navigation stack
  }else {
    this.setState({
      searching : false
    });
  }
}

// other methods etc

render(){
  return this.state.searching ? <ActivityIndicator /> : <Login />
}

当然,这是render方法的抽象,但是您会发现要点:)