从一个堆栈导航到另一个堆栈

Question

我有一个嵌套的导航结构。
登录屏幕需要导航到个人资料屏幕，而个人资料需要导航到收件箱。像这样，登录 -> 个人资料 -> 收件箱。

唱歌

import React, {Component} from 'react';
import Profile from "../Profile";

class AppSignIn extends React.Component{

_doSignIn(){
 this.props.navigation.navigate('Profile')
}

render(){
  return(
     <View>
      <TouchableHighlight onPress={this._doSignIn.bind(this)}>
          <Text>Go to Profile</Text>
      </TouchableHighlight>
     </View>
    )
 }
}

const AppSignInNav = createStackNavigator(
 {
    AppSignIn:{
    screen : AppSignIn
  },
  Profile:{
    screen:Profile
  }
 });

 export default createAppContainer(AppSignInNav);

个人资料

import React, {Component} from 'react';
import Inbox from "../Inbox";

class Profile extends React.Component{

_goToInbox(){
 this.props.navigation.navigate('Inbox')
}

render(){
  return(
     <View>
      <TouchableHighlight onPress={this._goToInbox.bind(this)}>
          <Text>Go to Inbox</Text>
      </TouchableHighlight>
     </View>
    )
 }
}

const ProfileNav = createStackNavigator(
 {
    Profile:{
    screen : Profile
  },
  Inbox:{
    screen : Inbox
  }
 });

 export default createAppContainer(ProfileNav);

我是如何因为尝试从 createStackNavigator 导航到另一个而收到此错误的。 The component for route 'Profile' must be a React component...
如何将 Profile 导出为 React 组件，但仍要导航到 Inbox。？

Answer 1

导航只能有一个appContainer。您正在尝试使用 createAppContainer 两次创建应用容器。

您可以使用AppSignInNav 作为应用容器，并将ProfileNav 导出为普通的StackNavigator。

有关createAppContainer 及其用途的详细信息，请参阅this 链接。