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

此博客基于react-native-0.48.4

在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

推荐阅读:

阅读更多

扫码向博主提问

Code-Porter

博客专家

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Android
  • ReactNativ
  • 微信小程序
去开通我的Chat快问
版权声明:本文出自阿钟的博客,转载请注明出处: https://blog.csdn.net/a_zhon/article/details/78195498
个人分类: ReatNative
所属专栏: React Native的学习之旅
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭