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 (
            
        );
    }
}

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 (
            
                {/*页面跳转*/}
                 {
                    this.props.navigation.navigate('Detail', {key: '传递的标题'})
                }}>
                    带参数 跳转至Details页面
                
                当前是Main页面
            
        );
    }
}

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: (),
    //设置顶部导航栏左边的视图  和 解决当有返回箭头时，文字不居中
    headerRight: (
         navigation.state.params ? navigation.state.params.menuClick() : null}>添加
        ),
});

• 隐藏左边返回箭头：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效果、编写一个真实网络请求案例