react native 路由

1.router stack

2.Navigator和兄弟组件NavigatorIOS

NavigatorIOS只能在IOS中使用，在Android中不能使用，而Navigator既可以在IOS中使用，也可以在Android中使用。

3.<Navigator>

比较稳定，但是比较繁琐。从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先yarn add react-native-deprecated-custom-components安装，然后从这个模块中import，即import { Navigator } from 'react-native-deprecated-custom-components'
常用参数

configureScene，类型是function，可选。通过这个参数可以修改界面在导航时候切换的动画。
initialRoute，类型是对象，表明最初的Route对象。一个Route简单来说就是一个界面，Navigator用Route来区分不同的界面。
navigationBar，类型是node，导航栏
renderScene，类型是function，必须参数，在这个方法里根据Route来渲染不同的Scene。

常用函数

push(route) ，跳转到某一个Route
pop()，推出当前状态
popToTop()，推出到第一个界面
popToRoute(route)，推出到某一个界面

4.RN0.44版本以后主推的方案是一个单独的导航库react-navigation包括三种：StackNavigation，TabNavigation，DrawerNavigation

4.1 StackNavigation

StackNavigator(RouteConfigs, StackNavigatorConfig)

默认情况下：

export default (
  routeConfigMap: NavigationRouteConfigMap, 
  stackConfig: StackNavigatorConfig = {} 
)

RouteConfigs：一个包含从路由名字到路由具体配置信息的映射, 它将指导navigator如何呈现当前路由。

举例：

const  ModalStack  =  StackNavigator ({
     Home:{    screen: MyHomeScreen,  },
     Profile: {    path: 'people/:name',    screen: MyProfileScreen,  },
});

StackNavigatorConfig：
路由选择：

initialRouteName-为栈设置默认的场景，必须是路由配置里已经配置过的一个场景。
initialRouteParams-初始路由参数
navigationOptions-场景中需要使用的默认navigation选项
paths-路由配置的地址映射（A mapping of overrides for the paths set in the route configs）

视觉选项：

mode-定义渲染与动画样式,取值如下:
card-使用标准的ios和Android场景样式(default)
modal-使新场景从底部滑入，这是常见的ios样式，只在ios中有效，android无效
headerMode-指定头部(header)的渲染效果，取值如下：
float-渲染一个停留在顶部的header，动画时不改动header，这是ios一种常见的模式
screen-每个场景都附有一个header,header的进出与场景一致，在Android中场用的
模式
none-去除头部渲染
cardStyle-使用这个属性覆盖或者扩充栈中个别card的默认样式
transitionConfig-该方法返回一个动画对象用来覆盖默认的场景动画
onTransitionStart-当card的切换动画即将开始时回调该方法
onTransitionEnd-当card的切换动画完成时回调该方法

举例：

const MainSrceenStackNavigator = StackNavigator(
    {
        MainScreenNavigator: {screen: MainScreenNavigator},
        DiscoverDetail: {screen: DiscoverDetail},
        SettingDetail: {screen: SettingDetail}
    },
    {
        initialRouteName: 'MainScreenNavigator',
        mode:'card',
        headerMode:'screen',
    }
);

4.2 TabNavigator

TabNavigator(RouteCofigs, TabNavigatorConfig)

RouteConfigs

路由配置对象，路由名到路由配置的映射，告诉navigator当前的路由

TabNavigatorConfig

tabBarComponent-用来做选择栏的组件，比如TabBarBottom(iOS default)， TabBarTop(Android default)
tabBarPosition-选择栏位置，可以为'top'或者'bottom'
swipeEnable-是否允许在选择间切换
animationEnabled-改变选择时是否需要动画
lazy-是否采用只在需要的时候临时渲染，而不是提前渲染
tabBarOptions-配置选择栏，具体将在下方提及。 几个传递到底层路由器，修改导航逻辑的参数
initRouteName-定义选择栏首次加载时的路由名
order-定义选择栏排序的路由名数组
paths-提供一个从路由名到地址配置的映射，它在routeConfing中被覆盖
backBahavior-返回键是否引起选择栏位置置于初始的选择状态？如果是，设为initalRoute, 否则设为none。默认为initialRoute的行为。

举例：

const MyApp = TabNavigator({
  Home: {    screen: MyHomeScreen,  },
  Notifications: {    screen: MyNotificationsScreen,  },
}, {
  tabBarOptions: {    activeTintColor:'#e91e63',  },
});

由TabNavigator(...)方法创造的导航组件，属性如下：
screenProps-传递给子场景和导航选项额外的选项，例如：

const TabNav = TabNavigator({
  // config
});
<TabNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

4.3 DrawerNavigation
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
RouteConfigs
路由配置对象是一个由路由名字到路由配置的对象，用于告诉导航当前的路由
DrawerNavigatorConfig

drawerWidth-抽屉的宽
drawerPosition-抽屉位置左（left）或右(right),默认为左
contentComponent-填充该抽屉内容的组件(Component),例如：导航的items。接受抽屉的navigation属性。默认为DrawerItems。下方有更多说明。
contentOptions-抽屉内容的配置。