React-Navigation 指定跳转到某个页面

两种跳转的情况

通过路由一层层跳转

从A-B-C-D, 最好从D-A  (从第二个页面开始传递参数)
从A开始跳转到B,在B页面跳转至C页面的时候需要传递参数key
this.props.navigation.navigate('C', {key: this.props.navogation.state.key})

从C跳转到D页面 

const {params} = this.props.navogation.getNavState()

this.props.navigation.navigate('D', {key: params.key})

从D返回到A页面

const {params} = this.props.navogation.getNavState()

const backAction = NavigationActions.back({
            key: params.key,
});

this.props.navigation.dispatch(backAction)

在某个页面跳转到没有经历过路由的页面

import SkinTestRecord from './module/ageloc-me/SkinTestRecord';
import Agelocme from './module/ageloc-me/Agelocme';


const TabStack = TabNavigator(
    {
        Tab1: {
            title: '首页',
            login: true,
            screen: HomePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_HOME : IMG_HOME_SELECTED)
                ),

            }
        },

        Tab2: {
            title: '产品目录',
            login: true,
            screen: ProductSummary,
            navigationOptions: {
                header: null,
                tabBarLabel: '产品目录',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_PM : IMG_PM_SELECTED)
                ),

            }
        },
        Tab3: {
            login: true,
            screen: RoleTranslation,
            navigationOptions: {
                header: null,
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_ADDNUSKIN : IMG_ADDNUSKIN_SELECTED)
                ),

            }
        },

        Tab4: {
            title: '个人中心',
            login: true,
            screen: MinePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '个人中心',
                tabBarIcon: ({ focused, tintColor }) => (
                    renderTabImage(!focused ? IMG_MINE : IMG_MINE_SELECTED)
                ),

            }
        },


    },
    {
        tabBarVisible: false,
        tabBarPosition: 'bottom',
        backBehavior: 'none',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            showIcon: true,
            scrollEnabled: false,
            activeTintColor: Constant.colorPrimary,
            inactiveTintColor: Constant.colorTxtDefault,
            style: {
                margin: 0,
                backgroundColor: 'white',
                paddingTop:ISIPHONEX ? 10 : 0,
                height:  ISIPHONEX ?  60 : 50,
            },
            tabStyle: {
                borderTopColor: Constant.colorDivider,
                margin: 0,
                padding: 0,
            },
            indicatorStyle: {
                height: 0
            },
            labelStyle: {
                padding: 0,
                margin: 0,
                marginTop: 0,
                fontSize: 12,
                marginBottom: ISIPHONEX ? 10 : 6,
            },

        }
    }
);



const AppRouterInfo = {
    DefaultTab: {
        title: '用户1',
        screen: TabStack,
        login: true,
    },
    Agelocme: {
        title: 'Agelocme',
        screen: Agelocme,
    },
    SkinTestRecord: {
        title: '记录',
        screen: SkinTestRecord
    },
};

const AppStack = StackNavigator(
    AppRouterInfo
    , {
        headerMode: 'none',
        initialRouteName: !__DEV__ ? 'Splash' : 'Splash'
    }
);


import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
                            index: 1,  // 注意不要越界
                            actions: [  // tabbar
                                NavigationActions.navigate({ routeName: 'DefaultTab',action:NavigationActions.navigate({
                                    routeName: 'Tab4', // 这个是tabs 里面的任何一个tab
                                })}),
                                NavigationActions.navigate({ routeName: 'Agelocme'})
                            ]
                        })
 this.props.navigation.dispatch(resetAction)


多层,自定义
const resetAction = NavigationActions.reset({
            index: 2,  // 注意不要越界
            actions: [  
                NavigationActions.navigate({ routeName: 'DefaultTab',action:NavigationActions.navigate({
                    routeName: 'Tab4',
                })}),
                NavigationActions.navigate({ routeName: 'Agelocme'}),
                NavigationActions.navigate({ routeName: 'SkinTestRecord'}),

            ]
        })
        this.props.navigation.dispatch(resetAction)

猜你喜欢

转载自blog.csdn.net/weixin_40166364/article/details/80050644