如何在React Navigation v5中的抽屉导航器中将路线作为对象传递并将v4转换为v5

时间:2020-07-24 11:07:47

标签: react-native react-navigation react-navigation-v5 stack-navigator react-navigation-drawer

首先,如果我犯了一些错误,我真的很抱歉,因为这是我第一次问关于stackoverflow的问题

我想将我的React Navigation v4迁移到v5,但我没有得到应该怎么做。我是编码和原生的新手

   export const AppStack = {
    ratingPage: {
        screen: DriverTripCompleteSreen,
        navigationOptions:{
            header: null
        }
    },
    RideList:{
        screen: RideListPage,
        navigationOptions:{
        header:null,
        }

    },
    Notifications:{
        screen:NotificationPage,
        navigationOptions:{
            header:null,
            }
    },

    Profile: {
        screen: ProfileScreen,
        navigationOptions:{
            header: null
        }
    },
    CardDetails: {
        screen: CardDetailsScreen,
        navigationOptions:{
            header: null
        }
    },
    About: {
        screen: AboutPage,
        navigationOptions:{
            header: null
        }
    },
    Map: {
        screen: MapScreen,
        navigationOptions:{
            header: null
        }
    },
    onlineChat:{
        screen:OnlineChat,
        navigationOptions:{
            header: null
        }
    },
    BookedCab: {
        screen: BookedCabScreen,
        navigationOptions:{
            header: null
        }
    },

    FareDetails: {
        screen: FareScreen,
        navigationOptions:{
            header:null,
        }
    },
    RideDetails: {
        screen: RideDetails,
        navigationOptions: {
            header: null
        }
    },

    Search: {
        screen:  SearchScreen,
        navigationOptions:{
            header: null
        }
    },
    editUser:{
        screen: EditProfilePage,
        navigationOptions:{
            header: null
        }

    },
    trackRide:{
        screen: TrackNow,
        navigationOptions:{
            header: null
        }

    },
    wallet:{
        screen: WalletDetails,
        navigationOptions:{
            header: null
        }

    },
    addMoney:{
        screen:AddMoneyScreen,
        navigationOptions:{
            header: null
        }
    },

    paymentMethod:{
        screen:SelectGatewayPage,
        navigationOptions:{
            header: null
        }
    }



}

//authentication stack for user before login
export const AuthStack = createStackNavigator({

    Reg: {
        screen: RegistrationPage,
        navigationOptions:{
        header:null,
        }
    },
    Login: {
        screen: LoginScreen,
        navigationOptions:{
            header:null,
        }
    }

},{
    initialRouteName: 'Login',
});

//drawer routes, you can add routes here for drawer or sidemenu
const DrawerRoutes = {

    'Map': {
        name: 'Map',
        screen: createStackNavigator(AppStack, {
            initialRouteName: 'Map',
            navigationOptions:{
                header: null
            }
        })
    },
    'RideList': {
        name: 'RideList',
        screen: createStackNavigator(AppStack, { initialRouteName: 'RideList',headerMode: 'none' })
    },
    'Profile': {
        name: 'Profile',
        screen: createStackNavigator(AppStack, { initialRouteName: 'Profile', headerMode: 'none' })
    },
    'About': {
        name: 'About',
        screen: createStackNavigator(AppStack, { initialRouteName: 'About', headerMode: 'none' })
    },
    'Notifications': {
        name: 'Notifications',
        screen: createStackNavigator(AppStack, { initialRouteName: 'Notifications', headerMode: 'none' })
    },
    'CardDetails': {
        name: 'CardDetails',
        screen: createStackNavigator(AppStack, { initialRouteName: 'CardDetails', headerMode: 'none' })
    },
    'wallet': {
        name: 'wallet',
        screen: createStackNavigator(AppStack, { initialRouteName: 'wallet', headerMode: 'none' })
    },
};

我主要关心的是我应该如何将AppStack对象传递给Drawer Navigation,这将使我的所有路线

根据文档,我认为我应该像使用state.routes那样传递路线,但是我不确定,我也不知道应该如何实现它。

0 个答案:

没有答案