Question

很抱歉，如果有一个明显的解决方案，但我没有发现react-navigation的文档非常清楚，这令人沮丧，因为它现在被呈现为官方的反应原生导航库。

在我的索引文件中，我调用asynstorage来检索登录时生成的访问令牌。然后我想要在登录时返回受保护的堆栈，否则返回欢迎堆栈。

render() {
if (this.state.isLoggedin === true) {
  return <Protected />;
}
else {
  return <Root />;
}

}

这是我的路由器

export const Root = StackNavigator({
Welcome: { screen: Welcome },
Login: { screen: Login },
Register: { screen: Register }
});

export const Protected = StackNavigator({
Conversations: { screen: Conversations }
});

当我重新加载应用时，这是有效的。我不明白的是如何在按下时从“Root”导航到“Protected”，我不希望这些路由在同一个StackNavigator中。有没有办法做到这一点，还是我需要更改整个结构并在一个stacknavigator下同时拥有Root和Protected？

再次抱歉，如果这是显而易见的，但我已经使用react native Navigator构建了一个聊天应用程序，在它被弃用之前并没有发现它几乎令人困惑。我觉得应该有更好的文档和如何构建真实世界应用程序的示例。

Answer 1

您可以使用this.props.navigation.navigate（'otherView'）导航其他页面，例如审核，下一个示例导航到页面聊天 App.js

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

    class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

这条路线已经定义，在这里有聊天，想要导航

 const SimpleApp = StackNavigator({
      Home: { screen: HomeScreen },
      Chat: { screen: ChatScreen },
    });

警告如果您正在进行登录验证主题，在登录用户后可以回馈并返回登录，建议在登录时重置路由

this.navigation.dispatch(NavigationActions.reset(
           {
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Home', params: {param: data},})
              ]
            }));

Answer 2

我完全同意你的观点，React Navigation的文档可能非常令人困惑。 Unforutnately Navigators不提供将道具传递给子组件的直接方法。对于这种情况，您不幸需要使用逃生舱，基本上是一个通用模块，允许您将组件相互连接。我强烈建议使用redux，而不是建议你自己编写这个复杂的组件。即使它需要一些样板，但它允许您将所有组件连接到相同的状态，因此在主组件类中，当Login或Register组件使用redux操作更改它时，isLoggedIn变量会立即更改。我建议阅读redux文档并开始使用它。你基本上只用其中的用户身份验证创建一个redux商店，然后从那里开始。

React Navigation - 在具有受保护视图的不同StackNavigators之间导航

2 个答案: