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

navigate(routeName, params, action)

  • routeName: 注册过的目标路由名称
  • params: 传递的参数
  • action: 如果该界面是一个navigator的话,将运行这个sub-action
const {navigate} = this.props.navigation;
    return (
      
        This is the home screen of the app
        

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

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

3)setParams - Make changes to route params

const {setParams} = this.props.navigation;

4)goBack - Close the active screen and move back

const {goBack} = this.props.navigation;

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'
        },
    },

你可能感兴趣的:(react,native)