前言
不久前自己也完整开发了一个React-Native项目,对其中的一些知识存在疑惑,再加上项目时间比较紧张,来不及做系统的学习。现在来回顾自己开发当中存在的疑惑点,和大家分享。第一篇是关于路由框架react-navigation,当时其实也没有好好看文档,现在回头看路由设计的确实比较乱,如果没看过文档建议直接去看文档,而后再看此篇文章。主要介绍createStackNavigator,createSwitchNavigator,createBottomTabNavigator,createMaterialTopTabNavigator,这四类路由框架,以及他们的组合使用。
createStackNavigator
顾名思义,其实这就是一种基于栈的路由管理方式,栈的特点就是先入后出,最新入栈的界面会显示在最顶部,这也是Android管理Activity的方式,也是React-Native App打开页面最主要的方式。
export function createStackNavigator( routeConfigMap: NavigationRouteConfigMap, stackConfig?: StackNavigatorConfig ): NavigationContainer;
该方法提供两个参数,一个是NavigationRouteConfigMap,当中存储的一些你声明的组件,他们之间构成了一个单独的路由。还有一个参数是StackNavigatorConfig,它允许你对路由做一个全局的设置,比如说是否显示头部,头部的主题等等。这边建议都不显示头部,更多的时候,页面的头部不尽相同,通过自定的这种形式会对开发更加的友好。需要注意的是,在最新版本的react-navigation当中,必须通过createAppContainer包裹导出。通过创建js文件:AppNavigator.js,一个完整的基于createStackNavigator的例子如下:
import { createStackNavigator, createSwitchNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation' import SplashPage from "../page/Splash/SplashPage"; import HomePage from "../page/Home/HomePage"; import Feather from "react-native-vector-icons/Feather" import Page1 from "../page/bottom/Page1"; import Page2 from "../page/bottom/Page2"; import Page3 from "../page/bottom/Page3"; import React from "react"; import Top1 from "../page/top/Top1"; import Top2 from "../page/top/Top2"; import Top3 from "../page/top/Top3"; const InitNavigator = createStackNavigator({ SplashPage: { screen: SplashPage, navigationOptions: { header: null } }, Page1: { screen: Page1, navigationOptions: { header: null } }, Page2: { screen: Page2, navigationOptions: { header: null } }, Page3: { screen: Page3, navigationOptions: { header: null } }, },{ }); export default createAppContainer(InitNavigator);
这个时候我们只需要修改App.js,就可以完成接入路由这个操作了。
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import AppNavigator from "./app/navigation/AppNavigator"; type Props = {}; export default class App extends Component<Props> { render() { return ( <AppNavigator/> ); } }
可以看到,单个js文件中的路由以单个组件的形式提供,可以预见,在项目路由复杂,项目路由多这种情况下react-navigation也一样可以轻松的管理路由。具体的页面代码就不再展示,效果如下:
createSwitchNavigator
switch,意思也比较明显,就是选择的意思。也就是说,当你使用这个路由时,内存中只会存在一个页面或者一个路由(多路由情况)。其实,大多数App都有一个欢迎界面,这个界面在App中只会显示一次,如果单单是使用栈的形式,不好控制出栈的操作,实现起来就比较复杂,那么我们的createSwitchNavigator就能派上用场了。当跳转到我们的主路由的时候,欢迎界面也就消失了。来看一下createSwitchNavigator中提供的参数:
export function createSwitchNavigator( routeConfigMap: NavigationRouteConfigMap, switchConfig?: SwitchNavigatorConfig ): NavigationContainer;
可以看到和createStackNavigator大同小意,也是一个路由管理集合,和一个可以对界面的总体设置,那么要实现我们上面想要的效果如何去做呢?其实也非常简单,代码如下:
import { createStackNavigator, createSwitchNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation' import SplashPage from "../page/Splash/SplashPage"; import HomePage from "../page/Home/HomePage"; import Feather from "react-native-vector-icons/Feather" import Page1 from "../page/bottom/Page1"; import Page2 from "../page/bottom/Page2"; import Page3 from "../page/bottom/Page3"; import React from "react"; import Top1 from "../page/top/Top1"; import Top2 from "../page/top/Top2"; import Top3 from "../page/top/Top3"; const InitNavigator = createStackNavigator({ Page1: { screen: Page1, navigationOptions: { header: null } }, Page2: { screen: Page2, navigationOptions: { header: null } }, Page3: { screen: Page3, navigationOptions: { header: null } }, },{ }); const AppRoot = createSwitchNavigator({ SplashPage: { screen: SplashPage, navigationOptions: { header: null } }, Main: InitNavigator, }); export default createAppContainer(AppRoot);
那么这个时候,我们的splash界面就不再是跳转到page1了。而是在AppRoot中的Main了。
import BasePage from "../../base/BasePage"; import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import React, {Component} from 'react'; export default class SplashPage extends BasePage { render() { return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <TouchableOpacity onPress={() => { this.goNextPage("Main") }}> <Text>Splash</Text> </TouchableOpacity> </View> ); } }
现在来看下效果
createBottomTabNavigator
如果我们要实现类似微信首页多tab多界面的时候,createBottomTabNavigator就能派上用场了,他通过单个路由管理多个tab,我们来看一下实现的参数:
export function createBottomTabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: BottomTabNavigatorConfig ): NavigationContainer;
哎呀,和前面两个一样,也是一个路由管理集合,和一个可以对界面的总体设置。具体设置属性的参数这里不多说,以后的文章会说到,我们把上面提到的两个路由结合起来,实现一个大部分App都有的一个正常路由流程。外部是个createSwitchNavigator做splash和主路由,主路由通过createStackNavigator用栈管理,但是第一个page我们使用createBottomTabNavigator做首页。那么代码如下:
import { createStackNavigator, createSwitchNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation' import SplashPage from "../page/Splash/SplashPage"; import HomePage from "../page/Home/HomePage"; import Feather from "react-native-vector-icons/Feather" import Page1 from "../page/bottom/Page1"; import Page2 from "../page/bottom/Page2"; import Page3 from "../page/bottom/Page3"; import React from "react"; import Top1 from "../page/top/Top1"; import Top2 from "../page/top/Top2"; import Top3 from "../page/top/Top3"; let hotSelest = <Feather name={'activity'} size={26} color='red' />; let hotUnSelest = <Feather name={'activity'} size={26} />; let pointSelect = <Feather name={'thumbs-up'} size={26} color='red' />; let pointUnSelect = <Feather name={'thumbs-up'} size={26} />; let mineSelect = <Feather name={'user'} size={26} color='red' />; let mineUnSelect = <Feather name={'user'} size={26} />; const BottomNavigator = createBottomTabNavigator({ Page1: { screen: Page1, navigationOptions: { tabBarLabel: '最热', tabBarIcon: ({tinColor, focused}) => (focused ? hotSelest : hotUnSelest) } }, Page2: { screen: Page2, navigationOptions: { tabBarLabel: '点赞', tabBarIcon: ({tinColor, focused}) => (focused ? pointSelect : pointUnSelect) } }, Page3: { screen: Page3, navigationOptions: { tabBarLabel: '我的', tabBarIcon: ({tinColor, focused}) => (focused ? mineSelect : mineUnSelect) } }, }, { tabBarOptions: { activeTintColor: '#e91e63', header: null, } }); const InitNavigator = createStackNavigator({ Page1: { screen: BottomNavigator, navigationOptions: { header: null } }, Top1: { screen: Top1, navigationOptions: { header: null } }, Top2: { screen: Top2, navigationOptions: { header: null } }, },{ }); const AppRoot = createSwitchNavigator({ SplashPage: { screen: SplashPage, navigationOptions: { header: null } }, Main: InitNavigator, }); export default createAppContainer(AppRoot);
通过设置lable,icon两个属性,设置图片和文字,这边没有图片,所以使用了一个三方库,有兴趣的可以了解一下。你也可以在,全局的设置当中设置是否显示lable和icon和文字选中颜色等等。首页的第一个界面点击之后会跳转到top界面,效果如下:
createMaterialTopTabNavigator
同过实现一个material风格的顶部选择导航,相对于createBottomTabNavigator,有些属性不同。我们来看看实现方法:
export function createMaterialTopTabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: TabNavigatorConfig ): NavigationContainer;
也是大同小异,具体的属性差别实践之后体会更加深刻,我也会在后面介绍,包括一下高级的用法。我们让首页第一个变成materialtop的风格,代码也是非常简单,我们在上面的基础上修改一下:
import { createStackNavigator, createSwitchNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation' import SplashPage from "../page/Splash/SplashPage"; import HomePage from "../page/Home/HomePage"; import Feather from "react-native-vector-icons/Feather" import Page1 from "../page/bottom/Page1"; import Page2 from "../page/bottom/Page2"; import Page3 from "../page/bottom/Page3"; import React from "react"; import Top1 from "../page/top/Top1"; import Top2 from "../page/top/Top2"; import Top3 from "../page/top/Top3"; const TopNavigator= createMaterialTopTabNavigator({ TopOne:{ screen:Top1 }, TopTwo:{ screen:Top2 }, TopThree:{ screen:Top3 }, }); let hotSelest = <Feather name={'activity'} size={26} color='red' />; let hotUnSelest = <Feather name={'activity'} size={26} />; let pointSelect = <Feather name={'thumbs-up'} size={26} color='red' />; let pointUnSelect = <Feather name={'thumbs-up'} size={26} />; let mineSelect = <Feather name={'user'} size={26} color='red' />; let mineUnSelect = <Feather name={'user'} size={26} />; const BottomNavigator = createBottomTabNavigator({ Page1: { screen: TopNavigator, navigationOptions: { tabBarLabel: '最热', tabBarIcon: ({tinColor, focused}) => (focused ? hotSelest : hotUnSelest) } }, Page2: { screen: Page2, navigationOptions: { tabBarLabel: '点赞', tabBarIcon: ({tinColor, focused}) => (focused ? pointSelect : pointUnSelect) } }, Page3: { screen: Page3, navigationOptions: { tabBarLabel: '我的', tabBarIcon: ({tinColor, focused}) => (focused ? mineSelect : mineUnSelect) } }, }, { tabBarOptions: { activeTintColor: '#e91e63', header: null, } }); const InitNavigator = createStackNavigator({ Page1: { screen: BottomNavigator, navigationOptions: { header: null } }, Top1: { screen: Top1, navigationOptions: { header: null } }, Top2: { screen: Top2, navigationOptions: { header: null } }, },{ }); const AppRoot = createSwitchNavigator({ SplashPage: { screen: SplashPage, navigationOptions: { header: null } }, Main: InitNavigator, }); export default createAppContainer(AppRoot);
在createBottomTabNavigator的第一个界面,加入了materialtop的路由,来看看效果:
总结
来做一个简单的总结:
1.这几种路由无非就是两个参数,一个是界面的集合以及全局界面属性的设置,不同的路由属性不同,你也可以在单个界面设置他的属性。
2.路由的使用需要通过createAppContainer包裹,他以一个组件的形式体现在我们的界面上,这也是新版本加上的,无疑让他更加的灵活。
3.一个完整的App路由绝对不是单个路由那么简单的,要好好思考App的业务逻辑,设置出专属于你的路由,react-navigation完全能胜任这个工作。
最后,核心代码都在上面,我就不贴项目连接了。