React-navigation使用攻略

源码在此 仅供参考

---

一、简介

根据React Navigation官网文档描述：Learn once, navigate anywhere.

React Navigation的诞生，源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求。
React Navigation是Facebook，Expo和React社区的开发者们合作的结果：它取代并改进了React Native生态系统中的多个导航库，其中包括Ex-Navigation，React Native的Navigator和NavigationExperimental组件。

内置导航器

react-navigation包含以下功能来帮助你创建导航器:

• StackNavigator - 一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置在堆栈的顶部
• TabNavigator - 渲染一个选项卡，让用户可以在几个页面之间切换
• DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉

使用导航顶层组件

导航器渲染的仅仅是React组件对应的应用页面。
要了解如何创建页面，请阅读以下内容：

• Screen navigation prop 允许调用调用导航操作，例如打开另一个页面
• Screen navigationOptions 定制导航器显示如何显示（例如标题栏的标题，选项卡的标签）

二、使用

上面介绍了很多，你可以点进去看StackNavigator、TabNavigator等它们的内容属性，属性有点多，这里就不累赘罗列了，具体可以参考这篇文章：react-navigation使用技巧 写得很好~

直接上效果：

 

效果图

使用步骤如下：

1. 导入依赖库

在项目Terminal中输入命令行：

npm install react-navigation --save

然后在package.json文件中就可以看到，依赖库已经导入完毕：

"react-native-tab-navigator": "^0.3.4",

接下来就可以愉快地使用react-navigation来进行页面导航了。

1. 配置Navigator

• 在项目的入口中直接配置StackNavigator，StackNavigator中注册所有需要跳转的界面，在这个项目中还有注册登录功能，在效果图中没有展示，这里不作探讨。首先是入口文件：

import React from 'react';
import {StackNavigator} from 'react-navigation';
import {TabNav} from "./RootPage";
import LoginPage from "./page/Login/loginPage";
import RegPage from "./page/Login/regPage";
import {FindAccountPage} from "./page/Login/findAccountPage"; // 路由导航

const App = StackNavigator({
        Login: {screen: LoginPage}, // 登录页
        Reg: {screen: RegPage}, // 注册页
        FindAccount: {screen: FindAccountPage}, // 找回密码页
        Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
                header: null
            })
        }
    },
    {
        initialRouteName: 'Login',
        headerMode: 'screen'
    });

export default App;

上面可以注意到TabNav，也就是TabNavigator，是作为一个screen参数的值传入到StackNavigator中，在上面提到的navigationOptions的配置中，我们将header设置为null，也就是不要标题栏。

• 接着进入到配置TabNavigator的RootPage中：

import React from 'react';
import {TabNavigator} from 'react-navigation';

import HomePage from './page/Home/HomePage';
import FriendPage from './page/Friend/FriendPage';
import TaskPage from './page/Task/TaskPage';
import MinePage from './page/Mine/MinePage';
import DealPage from './page/Deal/DealPage';

export const TabNav = TabNavigator(
    {
        Home: {
            screen: HomePage,
        },
        Task: {
            screen: TaskPage,
        },
        Friend: {
            screen: FriendPage,
        },
        Deal: {
            screen: DealPage,
        },
        Mine: {
            screen: MinePage,
        }
    },
    {
        tabBarOptions: {
            //当前选中的tab bar的文本颜色和图标颜色
            activeTintColor: '#4BC1D2',
            //当前未选中的tab bar的文本颜色和图标颜色
            inactiveTintColor: '#000',
            //是否显示tab bar的图标，默认是false
            showIcon: true,
            //showLabel - 是否显示tab bar的文本，默认是true
            showLabel: true,
            //是否将文本转换为大小，默认是true
            upperCaseLabel: false,
            //material design中的波纹颜色(仅支持Android >= 5.0)
            pressColor: '#788493',
            //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
            pressOpacity: 0.8,
            //tab bar的样式
            style: {
                backgroundColor: '#fff',
                paddingBottom: 1,
                borderTopWidth: 0.2,
                paddingTop:1,
                borderTopColor: '#ccc',
            },
            //tab bar的文本样式
            labelStyle: {
                fontSize: 11,
                margin: 1
            },
            //tab 页指示符的样式 (tab页下面的一条线).
            indicatorStyle: {height: 0},
        },
        //tab bar的位置, 可选值： 'top' or 'bottom'
        tabBarPosition: 'bottom',
        //是否允许滑动切换tab页
        swipeEnabled: true,
        //是否在切换tab页时使用动画
        animationEnabled: false,
        //是否懒加载
        lazy: true,
        //返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
        backBehavior: 'none',
    });

在这里我们可以看到，我们将底部导航的属性基本都用上了，这是为了方便大家在使用时作适合自己的选择，毕竟需求不一样，不过这个效果是可以接受的了~

• 在这个界面中导入了其他五个子界面，每个子界面效果可以设置成差不多，例如下面这样：

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../../img/fri_sel.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../../img/fri_nor.png')}/>
            );
        },
    };

    render() {
        return (
            <View style={styles.container}>
                <Text>这是好友</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});

在子界面中可以设置icon图标样式，表示在点击前后颜色的改变，效果如下：

 

点击当前界面

点击下个界面

首页

当然，我们也可以设置标题栏，只需要在下面代码中添加headerTitle属性：

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        headerTitle: '好友',
        tabBarIcon: ({focused}) => { ...

别忘了，在StackNavigator配置TabNavigator时不要设置header为null即可。

Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
             // header: null
            })
        }

关于DrawerNavigator，用到的情况比较少，就不展开说了，可以参考下面这个Demo 传送门

三、总结 & 题外话

总的来说，react-navigation这个库并不复杂，关键在于你需要将它封装成为符合自己项目需求的框架样式，后续的功能才能依次往里添加和实现。有些坑还是需要自己踩的，不过踩的坑基本都忘记了，可能痛苦的经理人总是本能想着忘记吧，哈哈又扯远了，刚开始学RN，求大神们别嘲讽哈，不过认真完成一件事情，的确有很高的成就感呢~继续加油！

 

43人点赞

 

React Native学习之路

 

作者：淮左明都
链接：https://www.jianshu.com/p/f39f020197ef
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。