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: ,
                backgroundColor: 'white',
                paddingTop:ISIPHONEX ?  : ,
                height:  ISIPHONEX ?   : ,
            },
            tabStyle: {
                borderTopColor: Constant.colorDivider,
                margin: ,
                padding: ,
            },
            indicatorStyle: {
                height: 
            },
            labelStyle: {
                padding: ,
                margin: ,
                marginTop: ,
                fontSize: ,
                marginBottom: ISIPHONEX ?  : ,
            },

        }
    }
);



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: ,  // 注意不要越界
                            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: ,  // 注意不要越界
            actions: [  
                NavigationActions.navigate({ routeName: 'DefaultTab',action:NavigationActions.navigate({
                    routeName: 'Tab4',
                })}),
                NavigationActions.navigate({ routeName: 'Agelocme'}),
                NavigationActions.navigate({ routeName: 'SkinTestRecord'}),

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