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

Question

很抱歉，如果有一个明显的解决方案，但我发现 react-navigation 的文档不是很清楚，这令人沮丧，因为它现在作为官方的 react-native 导航库提供。

在我的索引文件中，我调用 asyncstorage 来检索登录时生成的访问令牌。然后我想在登录时返回受保护的堆栈，如果没有返回欢迎堆栈。

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 }
});

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

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

Answer 1

你可以用 this.props.navigation.navigate('otherView') 导航到另一个页面，例如review，下一个示例导航到一个页面Chat 应用.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>
    );
  }
}

此路线已定义，在此有 Chat 一个想要导航的地方

 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 的文档可能非常混乱。不幸的是，导航器不提供将道具传递给子组件的直接方法。对于这种情况，不幸的是，您需要使用逃生舱口，基本上是一个通用模块，可让您将组件相互连接。我强烈建议您使用 redux，而不是建议您自己编写这个复杂的组件。尽管它需要一些样板，但它允许您将所有组件连接到相同的状态，因此在您的主组件类中，当 Login 或 Register 组件使用 redux 操作更改它时，isLoggedIn 变量将立即更改。我建议阅读 redux 文档并开始使用它。您基本上创建了一个仅包含用户身份验证的 redux 存储，然后从那里开始。