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-抽屉内容的配置。
网友评论