Question

我的导航有以下结构：

StackNavigator
    Login
    PasswordReset
    Dashboard
        VehicleEnquiry
            VehicleDetails

MainRouter.js文件：

const RootDrawer = DrawerNavigator({
  Dashboard: {
    screen: DashboardScreen,
    navigationOptions: {
      drawerLabel: Dashboard,
      drawerIcon: () => (
        <Icon name="home" style={styles.drawerIconStyle} />
      ),
    },
  },
  VehicleEnquiry: {
    screen: VehicleEnquiryScreen,
    navigationOptions: {
      drawerLabel: 'Barcode Scanner',
      drawerIcon: () => (
        <Icon name="barcode" style={styles.drawerIconStyle} />
      ),
    },
  },
  Logout: {
    screen: LoginScreen,
    navigationOptions: {
      title: "Login",
      drawerLabel: 'Logout',
      drawerIcon: () => (
        <Icon name="arrow-left" style={styles.drawerIconStyle} />
      ),    
      headerLeft: null
    },
  },
},

);

RootDrawer.navigationOptions = ({ navigation }) => ({
  headerTitleStyle: styles.headerTitleStyle,   
  headerStyle: styles.headerStyle,  
});


const MainRouter = StackNavigator({
  Dashboard: {
   screen: RootDrawer,
  },
  Home: {
    screen: HomeNavigation,
  },
  VehicleEnquiry: {
    screen: VehicleEnquiryScreen,
  },
  VehicleDetails: {
    screen: VehicleDetailsScreen
  }
});

在VehicleEnquiryScreen组件的主体中，我在类的构造函数之后添加了静态navigationOptions：

  static navigationOptions = ({ navigation }) => ({
        title: "Dashboard",
        headerLeft: (
            <TouchableOpacity onPress={() => { this.props.MainRouter.navigation.navigate('DrawerOpen'); }} >
                <View style={styles.userImageBackground}>
                    <Icon name="bars" style={{ color: 'white', padding: 10, marginLeft: 10, fontSize: 20 }} />
                </View>
            </TouchableOpacity>
        ),
    })

这是我想要实现的目标：我运行应用程序并直接进入登录屏幕。我登录并转到仪表板屏幕。从仪表板上打开左侧菜单，选择车辆查询选项，然后转到此屏幕。我希望能够从车辆查询屏幕再次打开侧面菜单，但是当我这样做时，我只是转到上一个屏幕而不是看到菜单。从车辆查询屏幕我可以进入车辆详细信息屏幕。当我在车辆详细信息屏幕上时，我还希望能够打开侧边菜单。

我已经尝试了很多方法来解决这个问题：

https://github.com/react-navigation/react-navigation/issues/335
https://reactnavigation.org/docs/intro/headers#Header-interaction-with-screen-component

任何帮助将不胜感激。干杯

如何从React Native中的嵌套StackNavigator打开Side Menu？

0 个答案: