ReactNative基础（五）使用react-navigation实现页面的跳转、参数的传递（StackNavigator）

此博客基于react-native-0.48.4

Navigator（导航栏）

在ReactNative v0.43之前的时候官方提供了Navigator组件，在v0.44版本之后官方就把他废弃了这是为什么呢？原因就是有个比他更好的react-navigation导航栏了、不得不说第三方依赖库真的很强大。

React Navigation

• 官网地址：https://reactnavigation.org
• 其中包含了我们开发中最常用的三种导航方式
  
  • StackNavigator（顶部导航栏）
  • TabNavigator （标签导航栏）
  • DrawerNavigator（侧滑菜单导航栏）
  • 效果图可以在官网首页看下

这篇文章就简单来说说StackNavigator

• 既然使用的是第三方库，如果在你项目的node_modules文件夹中没有react-navigation那么你需要执行如下命令

//进入你项目的根目录下执行npm install --save react-navigation

引入react-navigation中的StackNavigator

• 创建一个Application.js文件

import {    StackNavigator,} from 'react-navigation';import React from 'react';const Main = require('./Main');const Detail = require('./Details');const Menu = require('./Menu');/* * 初始化StackNavigator */export default App = StackNavigator({    //默认加载第一个页面，这里用来注册需要跳转的页面 相当于Manifest.xml文件    Main: {        screen: Main,    },    Detail: {        screen: Detail,    },    Menu: {        screen: Menu,    }});

这个文件负责对我们需要跳转的页面进行注册（相当于在Android中每一个Activity都需要在清单文件中注册），同时也创建了navigation供后续操作。

• 修改 android 和 ios 的入口文件加载这个文件，然后就会继续加载Main页面 最终显示内容

import React, {Component} from 'react';import {    AppRegistry,} from 'react-native';//这里不能写var App = require('./src/Application'); 会出现问题//（小白刚学还不会，有路过的大神可以留言教一下）。import App from './src/Application';export default class Pagejump extends Component {    render() {        return (            <App/>        );    }}AppRegistry.registerComponent('Pagejump', () => Pagejump);

效果图：

在Main页面添加一个按钮跳转至下一个页面、并修改导航栏的样式

import React, {Component} from 'react';import {    View,    Text,    StyleSheet,    TouchableOpacity,} from 'react-native';class Main extends Component {    //设置顶部导航栏的内容    static navigationOptions = ({navigation, screenProps}) => ({        //左侧标题        headerTitle: '我是主页面',        //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题        headerBackTitle: null,        //顶部标题栏的样式        headerStyle: styles.headerStyle,        //顶部标题栏文字的样式        headerTitleStyle: styles.headerTitleStyle,    });    render() {        return (            <View style={styles.container}>                {/*页面跳转*/}                <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => {                    this.props.navigation.navigate('Detail', {key: '传递的标题'})                }}>                    <Text style={{color: 'white'}}>带参数 跳转至Details页面</Text>                </TouchableOpacity>                <Text style={{marginTop: 10, color: 'black'}}>当前是Main页面</Text>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    button: {        width: 240,        height: 45,        borderRadius: 5,        alignItems: 'center',        justifyContent: 'center',        backgroundColor: '#4398ff',    },    headerStyle: {        backgroundColor: '#4398ff',    },    headerTitleStyle: {        //标题的文字颜色        color: 'white',        //设置标题的大小        fontSize: 18,        //居中显示        alignSelf: 'center',    },});module.exports = Main;

这里就要重点说一说navigationOptions中的属性了

• 可以参考一下这篇文章react-navigation使用技巧或者官网给出的属性介绍
• headerTitle: '标题' ===> 导航栏的标题
• header: null ===> 隐藏导航栏
• headerTintColor: 'white' ===> 返回按钮的颜色
• headerTitleStyle: {} ===> 导航栏文字的样式
• headerStyle: {} ===> 导航栏的样式
• headerRight: (< View/>) ===> 设置顶部导航栏友边的视图 和 解决当有返回箭头时，文字不居中
• headerLeft: (< View/>) ===> 设置导航栏左边的视图 和 去除返回箭头
• headerBackTitle: null ===> 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
• gestureResponseDistance: {horizontal: 300} ===> //设置滑动返回的距离

上面跳转页面的时候我们向下一个页面传递了一个键值为key的参数

//页面跳转 第一个参数则是我们在`Application.js`中注册的页面//第二个参数则是传递的参数，也可以不传。this.props.navigation.navigate('Detail', {key: '传递的标题'}//跳转页面的第二种写法const {navigate} = this.props.navigation;navigate('Detail', {key: '传递的参数'});//没有参数的情况const {navigate} = this.props.navigation;navigate('Detail');

页面接收传递过来的值

navigation.state.params.key //key就是你自己设置的键

页面跳转效果图（有点失帧）

Details页面这里就不贴出了，跟Main内容都是差不多的。可以查看文末给出的源码

主要说一下最后一个带有菜单的页面

• 主要还是配置navigationOptions属性

//设置顶部导航栏的内容static navigationOptions = ({navigation, screenProps}) => ({    // 这里面的属性和App.js的navigationOptions是一样的。    headerTitle: '我是带有菜单的页面',    // 设置滑动返回的距离    gestureResponseDistance: {horizontal: 300},    //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题    headerBackTitle: null,    //顶部标题栏的样式    headerStyle: styles.headerStyle,    //顶部标题栏文字的样式    headerTitleStyle: styles.headerTitleStyle,    //返回按钮的颜色    headerTintColor: 'white',    //设置顶部导航栏左边的视图    headerLeft: (<View/>),    //设置顶部导航栏左边的视图  和 解决当有返回箭头时，文字不居中    headerRight: (        <Text style={{color: 'white', marginRight: 13}}              onPress={() => navigation.state.params ? navigation.state.params.menuClick() : null}>添加        </Text>),});

• 隐藏左边返回箭头：headerLeft: (< View/>),
• 添加右边的菜单：headerRight: (),

对菜单添加点击事件,添加headerRight视图的时候我们已经调用好了方法现在只需要定义即可

• 需要在view渲染完成之后添加点击事件

componentDidMount() {    // 通过在componentDidMount里面设置setParams    this.props.navigation.setParams({        menuClick: this.menuClick,    });}

• 点击事件响应的函数

menuClick = () => {    alert('我是添加菜单');};

End：StackNavigator就简单的介绍到这里来，源码下载地址如果遇到什么问题欢迎留言或者issuse

推荐阅读：

• ReactNative基础（一）编写一个登录页面
• ReactNative基础（二）了解组件的生命周期
• ReactNative基础（三）了解ScrollView并打造一个Banner效果
• ReactNative基础（四）了解ListView的使用、实现GridView效果、编写一个真实网络请求案例