react-navigation 之最强路由，想去哪就去哪

react-navigation 之最强路由，想去哪就去哪

本文基于react-navigation@^3.0.0

1.实现启动页广告

2.实现mode的modal和card两种跳转方式

3.实现每个navigationOptions的自设，能够正常执行

4.NavigationActions实现任意无navigation的跳转

import React, { PureComponent } from 'react';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator, NavigationActions} from 'react-navigation';
import { Provider } from 'react-redux';
import store from "../store";
import NavigationService from "./NavigationService"  // 任意跳转


const HomeStack = createStackNavigator({
    Home: { screen: Home },
});

const NearbyStack = createStackNavigator({
    Nearby: { screen: Nearby },
});

const CategoryStack = createStackNavigator({
    Category: { screen: Category },
});

const CouponStack = createStackNavigator({
    Coupon: { screen: Coupon },
});

const MineStack = createStackNavigator({
    Mine: { screen: Mine },
});


const tabScreens = {
    Home: { screen: HomeStack,
        navigationOptions: {
            tabBarLabel:'首页',
            tabBarIcon: ({ focused, tintColor }) => (
                
            )
        }
    },
    Nearby: { screen: NearbyStack,
        navigationOptions: {
            tabBarLabel: '附近',
            tabBarIcon: ({ focused, tintColor }) => (
                
            )
        }
    },
    Category: { screen: CategoryStack,
        navigationOptions: {
            tabBarLabel: '类型',
            tabBarIcon: ({ focused, tintColor }) => (
                
            )
        }
    },
    Coupon: { screen: CouponStack,
        navigationOptions: {
            tabBarLabel: '卡',
            tabBarIcon: ({ focused, tintColor }) => (
                
            )}
    },
    Mine: { screen: MineStack,
        navigationOptions: {
            tabBarLabel: 'Me',
            tabBarIcon: ({ focused, tintColor }) => (
                
            )}
    },
}

const tabConfig = {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    initialRouteName: 'Home',
    // initialRouteParams: {title: 'Home'},
    lazy: true,
    tabBarOptions: {
        activeTintColor: Theme.systemRedColor,
        labelStyle: {
            fontSize: 12,
        },
    }
}

const Tab = createBottomTabNavigator(tabScreens, tabConfig)

Tab.navigationOptions = ({ navigation }) => {//五个一级页面的navigationOptions方法全部失效，如果不自定义导航条，又要让navigationOptions正常执行，所以就在上面tabScreens中的每个scene包了一层Stack，然后隐藏Navigator的导航，所有的一级界面navigationOptions就可以正常显示了(这个问题真是困扰我多年)
    // const { routeName } = navigation.state.routes[navigation.state.index];
    return {
        header: null
    }
};

const Navigator = createStackNavigator(//使用一个导航跳转，包装所有push跳转，以后所以得跳转二级页面等等都放在这里，
    {
        Tab: { screen: Tab },
        Details: { screen: DetailScene},
    }
);


const ModalNavigator = createStackNavigator(//实现iOS 从下往上 present，包装所有的modal模式跳转 ,所有的present放在这里
    {
        MainNavigator: { screen: Navigator },
        Login: { screen: LoginScene},
    },
    {
        mode: 'modal',
        headerMode: 'none',
    }
);

const SwitchNavigator = createSwitchNavigator(//为了实现启动广告页
    {
        ModalNavigator: ModalNavigator,
        LandingScene: LandingScene,     
    },
    {
        initialRouteName: 'LandingScene',
        // initialRouteParams: {title: 'Home'},  //可以带参数
    }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default class RootScene extends PureComponent {

    render() {
        // console.disableYellowBox = true;
        return (
            
                 { //增加无navigator路由
                    NavigationService.setTopLevelNavigator(navigatorRef)
                }}/>
            
        );
    }
}

跳转到一个不存在于当前navigator的页面，可以正常返回之前stack

import { NavigationActions } from 'react-navigation';

let _navigator;function

setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

export default {
    navigate,
    setTopLevelNavigator,
};