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

【问题标题】：Redirection not working on componentWillMount() react-native-router-flux重定向不适用于 componentWillMount() react-native-router-flux
【发布时间】：2018-12-17 07:16:40
【问题描述】：

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;

【问题讨论】：

componentWillMount 触发时是否收到任何错误消息？
没有错误，我尝试了超时并且它有效，但它不是我不会的，因为它会渲染屏幕
如果您能解释您的流程流程，那就太好了。如果这是应用程序的开始（启动）并且用户在登录时被定向到主页，或者如果他们需要登录则被引导到身份验证，那么我建议将您的主组件之外的逻辑移动到启动屏幕中，该屏幕在应用程序时进行检查正在初始化并将用户引导到正确的场景。
我只在启动屏幕上执行此操作...我的意思是我没有任何启动屏幕。我要么登录，要么以家为起点。总而言之，这里的启动屏幕是登录屏幕

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

【解决方案1】：

on props 帮了我大忙

我需要条件导航，所以我使用 success 和 failure 属性和场景名称进行导航

我在下面发布我的代码，希望它可以帮助某人

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

【讨论】：

【解决方案2】：

好吧，我可以假设您正在尝试获取或检查 UserService 中的用户数据的本地存储。我建议不要尝试使用生命周期钩子componentWillMount 来阻止组件渲染或“安装”。相反，您可以在 UserService.findAll() 查找用户（由状态控制）时渲染 ActivityIndicator，因为您不希望在 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 />
}

当然这是渲染方法的一个抽象，但你明白了要点:)

【讨论】：

感谢您的回答，但 Userservice.findAll() 不需要任何时间。它的同步方法。当我将调试器放在这一行时：if (user.length > 0) Actions.home(); 我得到Actions 未定义。 @Mohammad Abbas，我会试试你的代码并更新你
好的，让我知道你是怎么做的 :)
不，它没有用 :( 无论如何，非常感谢你的帮助