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

前端之家收集整理的这篇文章主要介绍了ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

博客基于react-native-0.48.4

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

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供后续操作。

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: '我是主页面',//设置@R_609_404@面左侧返回箭头后面的文字,默认是上一个页面标题
        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,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 ===> 设置@R_609_404@面左侧返回箭头后面的文字,默认是上一个页面标题
  • gestureResponseDistance: {horizontal: 300} ===> //设置滑动返回的距离

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

//页面跳转 第一个参数则是我们在`Application.js`中注册页面
//第二个参数则是传递的参数,也可以不传。
this.props.navigation.navigate('Detail',{key: '传递的标题'}

//@R_609_404@面的第二种写法
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},//设置@R_609_404@面左侧返回箭头后面的文字,默认是上一个页面标题
    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

推荐阅读:

猜你在找的React相关文章