react-navigation使用心得

官网地址：https://reactnavigation.org

一、主要构成：

（1） StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
（2） TabNavigator: 相当于iOS里面的TabBarController，屏幕下方的标签栏
（3） DrawerNavigator: 抽屉效果，侧边滑出

三个种类的Navigator功能强大，RN创建的app使用react-navigation，可以很好地搭建出页面架构。

二、搭建含有下方tab和上方导航的框架

首先先看看两个组件的api：
StackNavigator
API: StackNavigator(RouteConfigs, StackNavigatorConfig)
参数：RouteConfigs，StackNavigatorConfig
TabNavigator
API：TabNavigator(RouteConfigs, TabNavigatorConfig)
参数：RouteConfigs，TabNavigatorConfig

通常我们先创建TabNavigator，再将生成的TabNavigator给StackNavigator作为主页面：

//生成TabNavigatorlet TabNav = TabNavigator(MainTabRoute, TabOpt)//生成StackNavigatorlet StackNav = StackNavigator({            //注册一个Root页面            Root: {                    //TabNavigator作为Root的screen                screen: TabNav,                 navigationOptions: {                    header: false                }            },            ...MainTabRoute,   //这里通常配置一些Route，            ...UserRoute,      //可以配置多个            ...OtherRoute,        }, StackOpt);}//TabOpt,StackOpt为相应的配置，具体字段查阅文档。

1）StackNavigatorConfig （上面StackOpt部分）

参数:

• initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件（上面的代码中，我们注册了Root，则可以initialRouteName:’Root’）
• initialRouteParams: 初始路由的参数
• navigationOptions: 屏幕导航的默认选项（这个是导航栏的设置，下面会单独列举他的参数）
• paths: RouteConfigs里面路径设置的映射
• mode: 页面切换模式: 左右是card(相当于iOS中的push效果), 上下是- - modal(相当于iOS中的modal效果)
• card: 普通app常用的左右切换
• modal: 上下切换
• headerMode: 导航栏的显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
• float: 无透明效果, 默认
• screen: 有渐变透明效果, 如微信QQ的一样
• none: 隐藏导航栏
• cardStyle: 样式（iOS上页面切换会有白色渐变蒙层，想去掉则可以这样设置，cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置）
• onTransitionStart: 页面切换开始时的回调函数 (我们可以在这里注册一些通知，告知我们切面切换的状态，方便后面处理页面切换事件)
• onTransitionEnd: 页面切换结束时的回调函数

2）navigationOptions（StackNavigatorConfig的一个参数）

参数:

• title: 导航栏的标题
• header: 导航栏设置对象（自定义导航栏时使用）
• visible: 导航栏是否显示
• title: 导航栏的标题, 可以是字符串也可以是个组件
• backTitle: 左上角的返回键文字, 默认是上一个页面的title
• right: 导航栏右按钮
• left: 导航栏左按钮
• style: 导航栏的style
• titleStyle: 导航栏的title的style
• tintColor: 导航栏颜色
• cardStack: 配置card stack
• gesturesEnabled: 是否允许右滑返回，在iOS上默认为true，在Android上默认为false

3）TabNavigatorConfig

• animationEnabled: false, // 切换页面时是否有动画效果
• tabBarPosition: ‘bottom’, // 显示在底端，android 默认是显示在页面顶端的
• swipeEnabled: false, // 是否可以左右滑动切换tab
• backBehavior: ‘none’, // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
• tabBarOptions：tabBarOptions样式

4）tabBarOptions

    activeTintColor: '#ff8500', // 文字和图片选中颜色    inactiveTintColor: '#999', // 文字和图片未选中颜色    showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示    indicatorStyle: {        height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏        },     style: {        backgroundColor: '#fff', // TabBar 背景色        height: 44        },    labelStyle: {        fontSize: 10, // 文字大小        },

DrawerNavigator

const DrawerNav = DrawerNavigator({    Home: { screen: Home },    Bill: { screen: Bill },    Me: { screen: Me },    HomeTwo: { screen: HomeTwo },    HomeThree: { screen: HomeThree },    HomeFour: { screen: HomeFour },    BillTwo: { screen: BillTwo },    BillThree: { screen: BillThree }}, {    drawerWidth: 200, // 抽屉宽    drawerPosition: 'left', // 抽屉在左边还是右边    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件    contentOptions: {      initialRouteName: Home, // 默认页面组件      activeTintColor: 'white',  // 选中文字颜色      activeBackgroundColor: '#ff8500', // 选中背景颜色      inactiveTintColor: '#666',  // 未选中文字颜色      inactiveBackgroundColor: '#fff', // 未选中背景颜色      style: {  // 样式      }    }});

三、Screen Navigation Prop

在StackNavigator中注册后的组件都有navigation这个属性.
navigation又有5个方法:navigate, goBack, state, setParams, dispatch

1）navigate - Link to other screens

navigate(routeName, params, action)

• routeName: 注册过的目标路由名称
• params: 传递的参数
• action: 如果该界面是一个navigator的话，将运行这个sub-action

const {navigate} = this.props.navigation;    return (      <View>        <Text>This is the home screen of the app</Text>        <Button          onPress={() => navigate('Profile', {name: 'Brent'})}          title="Go to Brent's profile"        />      </View>     )

2）state - The screen’s current state/route

const {state} = this.props.navigation;  //拿到navigate(routeName, params, action)中的params参数<Text>Name: {state.params.name}</Text>

3）setParams - Make changes to route params

const {setParams} = this.props.navigation;<Button    onPress={() => setParams({name: 'Lucy'})}    title="Set title name to 'Lucy'"/>

4）goBack - Close the active screen and move back

const {goBack} = this.props.navigation;<Button    onPress={() => goBack()}    title="Go back from this HomeScreen"/>

5）dispatch - Send an action to the router

//调用navigate的actionthis.props.navigation.dispatch(navigateAction)

四、Navigation Actions

The following actions are supported:

• Navigate - Navigate to another route
• Reset - Replace current state with a new state
• Back - Go back to previous state
• Set Params - Set Params for given route
• Init - Used to initialize first state if state is undefined

五、路由设置

'Home': {        screen: require('./Home').default,        path: 'Home',        navigationOptions: {            tabBarLabel: '首页',            tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'home')        },    },    'Other': {        screen: require('./Other').default,        path: 'Other',        navigationOptions: {            tabBarLabel: '其他',            tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'position')        },    },    'My': {        screen: require('./My').default,        path: 'My',        navigationOptions: {            tabBarLabel: '我的',            tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'user')        },    },    'My/one': {        screen: require('./one').default,        path: 'My/one',        navigationOptions: {            header: false        },    },    'My/two': {        screen: require('./two').default,        path: 'My/two',        navigationOptions: {            title: '页面2'        },    },    'My/three': {        screen: require('./three').default,        path: 'My/three',        navigationOptions: {            title: '页面3'        },    },