react-native学习一: react-navigation

react-navigation: 是一款RN中的导航组件, 是Navigator的加强版,支持底部导航类似IOS中的UITabBarController,此外也支持侧拉效果方式的导航类似于Android中的DrawerLayout抽屉效果

什么是导航器:

可以看做是一个普通的React组件,可以通过导航器来定义你的App导航结构,导航器还可以渲染通用元素,例如可以标题栏,底部的tab栏和顶部的选项卡栏

在react-navigation中有如下的7种类型的导航器

1 createStackNavigator: 类似于普通的Navigator,屏幕上方导航栏

2 createTabNavigator:已经弃用,使用createBottomTabNavigator和/或createMaterialTopTabNavigator替代

3 createBottomTabNavigator:相当于IOS中的TabBarController,屏幕下方的导航栏

4 createMateriaTopTabNavigator:屏幕顶部的材料设计主体标题栏

5 createDrawerNavigator:抽屉效果,侧边滑出

6 createSwitchNavigator: SwitchNavigator的用途是一次只显示一个页面

在学习七种导航器之前,学习两个和导航关于概念:

Screen navigation prop(屏幕导航属性) : 通过navigation可以完成屏幕之间的调度操作

Screen navigationOptions(屏幕导航选项) : 通过navigationOptions可以定制导航器显示屏幕的方式(例如:头部标题,选项卡标签等)

 

重点: Screen navigation prop

当导航器中的屏幕被打开时,它会收到一个navigation prop, navigation prop是整个导航环节的关键一员,接下来就详解一下navigation的作用:

1 navigate:跳转到其他页面

2 state:屏幕当前的state

3 setParans:改变路由的params

4 goBack: 关闭当前屏幕

5 dispatch:向路由发送一个action

6 addListener:订阅导航生命周期的更新

7 isFocused:true 标志屏幕获取到了焦点

8 getParan:获取具有回退的特定参数

9 dangerouslyGetParant:返回父导航器

 

使用navigate进行界面之前的跳转

navigation.navigate({rootName,params,aciton,key}) 或navigation.navigate(rootName,params,action)

其中: rootName: 要跳转界面的路由名,也就是在导航器中配置的路有名

         params:要传递给下一个界面的参数

        action: 如果该界面是一个navigator的话,将运行这个sub-action;  key:要导航到的路由可选标志符.如果已存在,将后退到此路由

 

createStackNavigator

createStackNavigator提供App屏幕之间的切换能力,以栈的形式管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部

屏幕转场风格: 默认情况下createStackNavigator提供了转场过度效果,在Android上从屏幕底部淡入,在IOS上是从屏幕的右侧划入,当然也可以配置

createStackNavigator  API:

createStackNavigator(RouterConfigs ,StackNavigatorConfig) : RouteConfigs(必选) : 路由配置对象是从路由名称到路由配置的映射,告诉导航器该理由呈现什么. 实例Demo详见 github, StackNavigatorConfig(可选),配置导航器的路由

1 yarn add react-navigation

2 yarn add react-native-gesture-handler 

3 react-native link react-native-gesture-handler 

createTopNavigator

createTopNavigator(RouterConfigs ,TopNavigatorConfig) : 其参数同createStackNavigator

createTopNavigator和createBottomNavigator 不同于createStackNavigator的是 TabNavigatorConfig:

其TabNavigatorConfig:

tabBarComponent: 指定TabNavigator的TabBar组件

tabBarposition:用于指定TabBar的显示位置, 支持'top'和'bottom'两种方式

swipeEnabled: 是否可以左右滑动切换tab

lazy:默认值是false 如果是true. Tab页只会在被选中或滑动到该页时被渲染.当为false时,所有的Tab页将直接被渲染(可以轻松实现多Tab页面的懒加载)

optimizationsEnabled: 是否将Tab页嵌套.如果是,一旦该Tab页失去焦点,将被移除当前页面,从而提高内存使用率

animataionEnabled: 切换页面时是否有动画效果

initialLayout:包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟

tabBarOptions:配置TabBar 下文会详细讲解

initialRouteName:默认页面组件,TabNavigator显示的第一个页面

order:定义tab顺序的routeNames数组

paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径

backBehavior:后退按钮是否会导致初始tab?如果是,则设切换到初始tab,否则什么也不做,默认为切换到初始tab

其中tabBarOptions(上文中提到的下文会详细讲解的属性)

activeTintColor:设置TabBar选中状态下的标签和图标的颜色

inactiveTintColor:设置TabBar非选中状态想家的标签和图标的颜色

showIcon: 是否展示图标,.默认是false

showLabel:是否展示标签,默认是true

upperCaseLabel:是否使标签大写,默认是true

tabStyle:设置单个tab的样式

indicatorStyle:设置indicator(tab下面的那条线)的样式, 就是TopNavigator滑动的那条线的样式

labelStyle:设置TabBar标签的样式

iconStyle:设置图标的样式

style:设置整个TabBar样式

allowFontScaling:设置TabBar标签是否支持缩放,默认支持

scrollEnable:是否支持选项卡滑动,默认为false

demo请移步到github

 

createDrawerNavigator 

其两个参数同上面的三个navigator一致

不同点:

DrawerNavigatorConfig:

drawerWidth: 设置侧边菜单的宽度

drawerPosition: 设置侧边菜单的位置, 支持left right 默认是left

contentComponent:用于呈现抽屉导航器内容的组件, 例如导航项. 接受抽屉导航器的navigation属性,默认为DrawerItems. 有关详细,请参照下文

contentOptions:配置抽屉导航器内容,见下文

useNativeAnimations:是否启用Native动画,默认启用

drawerBackgroundColor:侧边菜单的背景

initialRouteName:初始化哪个界面为根界面,如果不配置,默认使用RouteConfigs中的第一个页面当做根界面

order:drawer排序,默认使用配置路由的顺序

paths:提供routeName到path config映射,它覆盖routeConfigs中设置的路径

backBehavior:后退按钮是否会导致标签切换到初始drawer? 如果是,则切换到初始drawer,否则什么也不做,默认为切换到初始drawer

 

自定义侧边栏(contentComponent)

DrawerNavigator有个默认带滚动的侧边栏,你也可以通过重写这个侧边栏组件来自定义侧边栏

DrawerItems 的contetOptions

contentOptions主要配置侧滑栏item的属性,只对DrawerItems,例如我们刚才写的例子,就可以通过这个属性来配置颜色,背景色等,其主要属性有  items ,activityItemKey, activieTintColor,activieBackgroundColor, inactiveTintColor,inactiveBacgroundColor,onItemPress,itemsContainerStyle,itemStyle,labelStyle,iconContainerStyle,activelabelStyle,inactiveLabelStyle,iconContainerStyle

 

createSwitchNavigator

createSwitchNavigator的用途是一次只显示一个页面,默认情况下,它不处理返回操作,并在你切换时将路由重置为默认状态

cerateSwitchNavigator API
createSwitchNavigator(RouteConfigs,SwitchNavigatorConfig): RouteConfigs(必选)同createStackNavigator的RouteConfigs,路由配置对象是从路由名称到路由配置的映射,告诉该路由器呈现什么; SwitchNavigatorConfig(可选), 配置导航器的路由

SwitchNavigatorConfig: 

initialRouteName : 第一次加载时初始选项卡路由的routeName

resetOnBlur: 切换离开屏幕时,重置所有嵌套导航器的状态, 默认为true

paths: 提供routeName到path配置的映射, 它重写routeConfigs中设置的路径

backBehavior: 控制'返回'按钮是否会导致Tab页切换到初始Tab页? 如果是, 设置为initialRoute 否则none  默认为none行为

实例代码请见github

其中抽取公共的AppNavigator代码为:

//导航器

import React, {Component} from 'react';
import {Platform,Button,ScrollView,SafeAreaView,View} from 'react-native';
import {createStackNavigator,createMaterialTopTabNavigator,createBottomTabNavigator,createDrawerNavigator,DrawerItems,createSwitchNavigator} from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
//引入组件页面
import HomePage from '../pages/HomePage'
import Page1 from '../pages/Page1'
import Page2 from '../pages/Page2'
import Page3 from '../pages/Page3'
import Page4 from '../pages/Page4'
import Page5 from '../pages/Page5'
import Login from '../pages/Login'

//1 创建两个导航器,用于演示createSwitchNavigator
const AppStack = createStackNavigator({
    Home: {
        screen:HomePage
    },
    Page1: {
        screen:Page1
    }
})
const AuthStack = createStackNavigator({
    Login: {
        screen:Login
    }
})
//2 将用于演示createSwitchNavigator导航器导出
export const AppSwitchNavigator =  createSwitchNavigator({
    Auth:AuthStack,
    App:AppStack
}, {
    initialRouteName:'Auth'
})



//创建Top导航器
const TopNavigator = createMaterialTopTabNavigator({
    Page1: {
        screen:Page1,
        navigationOptions: {
            tabBarLabel:'Android'
        }
    },
    Page2: {
        screen:Page2,
        navigationOptions: {
            tabBarLabel:'ios'
        }
    },
    Page3: {
        screen:Page3,
        navigationOptions: {
            tabBarLabel:'React'
        }
    },
    Page4: {
        screen:Page4,
        navigationOptions: {
            tabBarLabel:'React Navive'
        }
    },
    Page5:{
        screen:Page5,
        navigationOptions: {
            tabBarLabel:'My Pleasure'
        }
    }
},{
    tabBarOptions: {
        tabStyle: {mindWidth:50},
        upperCaseLabel:false,   //是否使标签大写,默认为true
        scrollEnabled:true,  //是否支持选项卡滑动,默认为fasle
        style: {            //设置整个TabBar样式
            backgroundColor:'#678'
        },
        indicatorStyle: {   //设置指示器样式(下面那条横线)
            height:2,
            backgroundColor:'pink'
        },
        labelStyle: {   //文字样式
            fontSize:13,
            marginTop:6,
            marginBottom:6
        }
    }
})

//创建底部导航
const BottomNavigator = createBottomTabNavigator({
    //底部的和头部的基本设置一样
    Page1: {
        screen:Page1,
        navigationOptions: {
            tabBarLabel:'最热',
            tabBarIcon:({tintColor,focused}) => {
                return <Ionicons
                    name={'ios-home'}
                    size={26}
                    style={{color:tintColor}}
                />
            }
        }
    },
    Page2: {
        screen:Page2,
        navigationOptions: {
            tabBarLabel:'趋势',
            tabBarIcon: ({tintColor,focused}) => (
                <Ionicons
                    name={'ios-people'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    Page3: {
        screen:Page3,
        navigationOptions: {
            tabBarLabel:'收藏',
            tabBarIcon: ({tintColor,focused}) => (
                <Ionicons
                    name={'ios-chatboxes'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    Page4: {
        screen:Page4,
        navigationOptions: {
            tabBarLabel:'我的',
            tabBarIcon: ({tintColor,focused}) => (
                <Ionicons
                    name={'ios-aperture'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    }
},{
    tabBarOptions: {
        activeTintColor:'red'
    }
})


//创建抽屉导航
const DrawerNavigator = createDrawerNavigator({
    Page4: {
        screen:Page4,
        navigationOptions: {
            drawerLabel:'Page4',
            drawerIcon: ({tintColor}) => {
                return <MaterialIcons
                    name={'drafts'}
                    size={24}
                    style={{color:tintColor}}
                />
            }
        }
    },
    Page5: {
        screen:Page5,
        navigationOptions: {
            drawerLabel:'Page5',
            drawerIcon: ({tintColor}) => {
                return <MaterialIcons
                    name={'move-to-inbox'}
                    size={24}
                    style={{color:tintColor}}
                />
            }
        }
    }
},{
    initialRouteName:'Page4',
    contentOptions: {
        activeTintColor:'#e91e63'
    },
    contentComponent: (props) => {
        return <ScrollView style={{backgroundColor:'#789',flex:1}}>
            {/*用于适配全面屏*/}
            <SafeAreaView forceInset={{top:'always',horizontal:'never'}}>
                <DrawerItems {...props}/>
            </SafeAreaView>
        </ScrollView>
    },
    drawerLockMode: 'unlocked',//设置是否响应手势

})


//创建导航器(包含底部和顶部导航器,抽屉导航器)
export const AppStackNavigator = createStackNavigator({
        HomePage: {
            screen:HomePage
        },
        Page1: {
            screen:Page1,
            navigationOptions: ({navigation}) => ({
                title: `${navigation.state.params.name}页面名`   //动态配置
            })
        },
        Page2: {
            screen:Page2,
            navigationOptions: {  //在这里定义每个页面的导航数据,静态配置
                title:'This is Page2'
            }
        },
        Page3: {
            screen:Page3,
            navigationOptions: (props) => {
                const {navigation} = props;
                const {state,setParams} = navigation;
                const {params} = state;
                return {
                    title:params.title ? params.title: 'This is Page3',
                    headerRight: (
                        <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={() => {
                            setParams({mode: params.mode === 'edit' ? '' : 'edit'})
                        }}/>
                    )

                }
            }
        },
        Page4: {
            screen:Page4,
            navigationOptions: {
                title:'This is Page4'
            }
        },

        Bottom: {
            screen:BottomNavigator,
            navigationOptions: {
                title: 'BottomNavigator'
            }
        },
        Top: {
            screen:TopNavigator,
            navigationOptions: {
                title:'TopNavigator'
            }
        },
        DrawerNav: {
            screen:DrawerNavigator,
            navigationOptions: {
                title:'DrawerNav'
            }
        }
})

 

github: https://github.com/2402zmybie/react_native_navigation/tree/master