react-navigation使用心得

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作为主页面：

//生成TabNavigator
let TabNav = TabNavigator(MainTabRoute, TabOpt)
//生成StackNavigator
let 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的action
this.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'
        },
    },