React native 在react native/react navigation中从超级组件调用子react navigation prop

我有一个使用react导航的react本机应用程序。在我的应用程序中有以下结构

class MainContainer extends Component {

render() {
    return (

    <View style={{ flex: 1 }}>

    <Header
      backgroundColor={appcolors.primaryColor}
      leftComponent={<TouchableOpacity onPress={() => this.props.navigation.toggleDrawer() }><Feather name='align-justify' size={24} color='white' /></TouchableOpacity>}
      centerComponent={{ text: this.props.headerTitle , style: { color: 'white' } }}
    />

    <MainDrawerNavigation/>

    </View>

   );
}
}; 

尝试从

maincainer

调用

this.props.navigation.toggleDrawer（）

时出错。然后为了测试，我在

XScreen

上添加了一个按钮，并尝试切换抽屉，结果成功。所以我想知道有没有办法将儿童导航道具传递给super view。所以我可以调用

this.props.navigation.toggleDrawer（）

方法并从

maincainer

控制抽屉。或任何可用于解决此问题的导航实践

---

PS：我得到的错误是

\u this2.props.navigation.toggleDrawer不是
主容器中的函数，该
this.props.navigation
没有启动，因此您得到了这样的错误。您只能在
MainDrainerNavigation
的子组件内访问它，即仅XScreen、YScreen和ZScreen

为了获得最佳实践，您需要设计所有组件如何导航到您的应用程序中，并将
Navigator
对象/组件作为根组件传递

有多个导航器，您可以阅读它们

简化的应用程序需要SwitchNavigator、DrumerNavigator、TabBarNavigator和StackNavigator

SwitchNavigator：
它用于用户身份验证。它将控制两个组件之间的切换（仅供参考，组件可以是导航器或React.component）


付款人：
用于在屏幕的左侧或右侧显示侧面板或滑动视图。因此，您可以直接将此组件传递到SwitchNavigator的验证成功屏幕

export default const AppDrawer = DrawerNavigator(
  {
    Home: { screen: TabBarNav },
    Notes: { screen: NotesStack },
    Invite: { screen: InviteContactsStack },
    Files: { screen: FilesStack },
    Settings: { screen: SettingsStack }
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <LeftSidePanel {...props} />
  }
);

StackNavigator：
它的名字表明它将容纳一堆组件。所以，当从抽屉中选择任何项目时，您可以直接在该屏幕中放置StackNavigator

export default const ChatsStack = StackNavigator({
  Chats: {
    screen: Chats
  },
  Messages: {
    screen: Messages
  }
});

您可以通过代码阅读其中的解释

请告诉我它是否满足您的需要。
谢谢您的回答。在我的情况下，我无法进入主堆栈导航。因为应该有一个标题why@SathinduKavneth，您不应该将抽屉导航放在堆栈导航中，因为您将保留用于该导航的内存。您最好将StackNavigation放在抽屉导航中，如我在示例中所述。
export default const AppDrawer = DrawerNavigator(
  {
    Home: { screen: TabBarNav },
    Notes: { screen: NotesStack },
    Invite: { screen: InviteContactsStack },
    Files: { screen: FilesStack },
    Settings: { screen: SettingsStack }
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <LeftSidePanel {...props} />
  }
);

export default const TabBarNav = TabNavigator(
  {
    ChatsTab: {
      screen: ChatsStack,
      navigationOptions: {
        tabBarLabel: "Chats"
      }
    },
    InviteContacts: {
      screen: InviteContactsStack,
      navigationOptions: {
        tabBarLabel: "Invite"
      }
    },
    Notifications: {
      screen: NotificationsStack,
      navigationOptions: {
        tabBarLabel: "Notifications"
      }
    },
    Tasks: {
      screen: TasksStack,
      navigationOptions: {
        tabBarLabel: "Tasks"
      }
    }
  },
  {
    tabBarPosition: "bottom",
  }
);

export default const ChatsStack = StackNavigator({
  Chats: {
    screen: Chats
  },
  Messages: {
    screen: Messages
  }
});