Navigation 說明

三種模式

StackNavigator(單頁進行)

export const SettingStack = StackNavigator({
    Settings: {
        screen: Settings,
        navigationOptions: {
            title: 'Settings'
        }
    }
});

export default StackNavigator({
    Login: {
        screen: Login,
        navigationOptions: ({ navigation }) => {
            return {
                title: 'Login',
                headerRight: (
                    <Button title={'New'} onPress={()=> navigation.navigate('NewBlogs)} />
                )
            }
        }
    },
    Blogs: {
        navigationOptions: {
             title: 'Blogs'   
        }
    },
    NewBlogs: {
        navigationOptions: {
             title: 'NewBlogs'   
        }
    }
});

TabNavigator(分頁進行)

export const Tabs = TabNavigator({
    Feed: {
        screen: FeedStack,
        navigationOptions: {
            tabBar: {
                label: 'Feed',
                icon: ({ tintColor}) => <Icon name="list" size={35} .... />
            }
        }
    },
    Me: {
        screen: Me,
        navigationOptions: {
            tabBar: {
                label: 'Me',
                icon: ({ tintColor}) => <Icon name="list" size={35} .... />
            }
        }
    }
});

DrawerNavigator(空白單頁)

操作方式

返回頁面

this.props.navigation.goBack(screen1Key) brings you to screen0.
this.props.navigation.goBack(screen5Key) brings you to screen4.
this.props.navigation.goBack();
this.props.navigation.goBack(null);

取得 key

const { state } = navigation;
const currentRouteKey = state.routes[state.index].key;

reset

navigation.dispatch(
              NavigationActions.reset({
                index: 0,
                key: null,
                actions: [
                  NavigationActions.navigate({
                    routeName: "Tabs",
                    action: NavigationActions.navigate({
                      routeName: "MessageList",
                      action: NavigationActions.navigate({
                        routeName: "Details",
                        params: { ...users[0] }
                      })
                    })
                  })
                ]
              })
            );

or

navigation.dispatch(
              NavigationActions.reset({
                index: 0,
                key: null,
                actions: [
                  NavigationActions.navigate({
                    routeName: "Tabs",
                    action: NavigationActions.navigate({
                      routeName: "Details",
                      params: { ...users[0] }
                    })
                  })
                ]
              })
            );

reaplce 方式，需要自定，reset，會重新執行，所以要用 repalce

import type {NavigationAction,NavigationState} from "react-navigation/lib/TypeDefinition";

import NavigationActions from "react-navigation/lib/NavigationActions";

const updateStackRouter = function (StackNavigator: any) {

const parentGetStateForAction = StackNavigator.router.getStateForAction;

StackNavigator.router.getStateForAction = function (action:NavigationAction,inputState?: ?NavigationState): ?NavigationState {

    const state: ? NavigationState = parentGetStateForAction(action, inputState);

    if (state && action.type === NavigationActions.NAVIGATE) {
        if (action.params && action.params.replaceRoute) {
            //replaceRoute值 仅仅作为一个标识，进到这个方法之后就没有作用了
            delete action.params.replaceRoute;
            if (state.routes.length > 1 && state.index > 0) {
                const oldIndex = state.index - 1;
                // 移除替换
                state.routes.splice(oldIndex, 1);
                //index现在就减少了一个
                state.index = oldIndex;
            }
        }
    }

    return state;
  };
};

export default updateStackRouter;

//使用方式
1.updateStackRouter(AppNavigator);         //参数为StackNavigator

2.this.props.navigation.navigate('Home',
            {
                replaceRoute: true,
                userName: 'erBai'
            }
        );

作者：黄二白
链接：http://www.jianshu.com/p/a4c8cbbabbaf
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

接受參數

const { params } = this.props.navigation.state;

this.state = {
    data: params
};