文档章节

React Native导航组件react-navigation(TabNavigator+StackNavigator实现界面间跳转,Tab切换)

d
 djonce
发布于 2017/06/06 13:07
字数 1789
阅读 1362
收藏 0

下面主要介绍使用TabNavigator+StackNavigator实现界面间跳转,Tab切换。

      TabNavigator:渲染出一个tab bar让用户可以在多个screen之间切换(类似底部导航栏,用来在同一屏幕下切换不同界面)

      StackNavigator:一次渲染一个screen,在screen之间切换.当一个新的screen被打开的时候,他被放在栈顶(用来跳转页面和传递参数)

1)首先在你的应用中安装此库:

npm install --save react-navigation

2)创建一个.js文件(这里文件命名为MainPage),用于定义TabNavigator:

import React from 'react';
import {
    StyleSheet,
    Image,
    Platform
} from 'react-native';
import {TabNavigator} from "react-navigation";
import Tab1Page from './Tab1Page';
import Tab2Page from './Tab2Page';
import Tab3Page from './Tab3Page';
import Tab4Page from './Tab4Page';

export const MainNavigator = TabNavigator({
    Tab1: {
        screen: Tab1Page,
        navigationOptions: {//配置TabNavigator的一些属性
            title: 'Tab1',//标题,会同时设置导航条和标签栏的title 
            tabBarLabel: 'Tab1',//标签栏的title,这里设置的与标题一样,如不一样时可进行设置
            //设置标签栏的图标
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab1.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    },
    Tab2: {
        screen: Tab2Page,
        navigationOptions: {
            title: 'Tab2',
            tabBarLabel: 'Tab2',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab2.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
            //header: null,//设置无导航栏(也就是无顶部标题栏)
        },
    },
    Tab3: {
        screen: Tab3Page,
        navigationOptions: {
            title: 'Tab3',
            tabBarLabel: 'Tab3',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab3.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    },
    Tab4: {
        screen: Tab4Page,
        navigationOptions: {
            title: 'Tab4',
            tabBarLabel: 'Tab4',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../../res/images/ic_tab4.png')}
                    style={[{tintColor: tintColor}, styles.icon]}
                />),
        }
    }
}, {
    animationEnabled: false, // 切换页面时不显示动画
    tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的
    swipeEnabled: false, // 禁止左右滑动
    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转
    tabBarOptions: {//配置标签栏的一些属性
        activeTintColor: '#e91e63',// 文字和图片选中颜色
        inactiveTintColor: '#999', // 文字和图片默认颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 暂时解决这个问题  
        style: {
            backgroundColor: '#F5FCFF', // TabBar 背景色
            paddingBottom:0,
        },
        labelStyle: {
            fontSize: 12, // 文字大小
        },

    },
});

const styles = StyleSheet.create({
    icon: {
        height: 22,
        width: 22,
        resizeMode: 'contain'
    }
});

TabNavigatorConfig

  screen:对应界面名称,需要填入import之后的页面

  tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom'

  swipeEnabled: 是否允许在标签之间进行滑动 

  animationEnabled: 是否在更改标签时显示动画 

 lazy-是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true

 tabBarOptions:配置标签栏的一些属性

 tabBarOptions 配置标签栏的一些属性 

   activeTintColor:设置文字和图片选中颜色(前景色)

   activeBackgroundColor:设置文字和图片选中的背景色

   inactiveTintColor:设置文字和图片默认颜色 (前景色)

   inactiveBackgroundColor:设置文字和图片默认的背景色

   showLabel:是否显示label,默认开启

   style:tabbar的样式 

   labelStyle:label的样式

   tabStyle:tab的样式 

   showIcon- android 默认不显示 icon, 需要设置为 true 才会显示

   upperCaseLabel:是否使标签大写,默认为true

   pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)

   pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0) 

   scrollEnabled:是否启用可滚动选项卡

  indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题 

  iconStyle:图标样式

navigationOptions配置TabNavigator的一些属性 

title:标题,会同时设置导航条和标签栏的title 

tabBarVisible:是否隐藏标签栏。默认不隐藏(true)

tabBarIcon:设置标签栏的图标。需要给每个都设置

tabBarLabel:设置标签栏的title

3)创建一个.js文件(这里的文件命名为AppIndexPage),用于定义StackNavigator:

import React from 'react';
import {StackNavigator} from "react-navigation";
import {MainNavigator} from './MainPage';
import TestPage from './TestPage';
export const AppIndex = StackNavigator({
    Home: {
        screen: MainNavigator,
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#e91e63',
            },
            headerTitleStyle: {
                color: 'white',
                alignSelf: 'center',
            },
        }
    },
    Test: {
        screen: TestPage,
        navigationOptions: {
            title: 'TestPage',
           // headerTintColor: 'white',//导航栏颜色
            headerStyle: {//导航条的样式。背景色,宽高等  
                backgroundColor: '#e91e63',//背景色
            },
            headerTitleStyle: {//导航栏文字样式
                color: 'white',
                alignSelf: 'center',
            },
        },
    },
}, {
    headerMode: 'screen'//headerMode返回上级页面时动画效果
                         // float:iOS默认的效果
                         // screen:滑动过程中,整个页面都会返回
                         // none:无动画
});

StackNavigatorConfig

  screen:对应界面名称,需要填入import之后的页面

  initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件 

  initialRouteParams:初始路由参数

  navigationOptions:配置StackNavigator的一些属性。 

  path:路由中设置的路径的覆盖映射配置  (path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径,例如:【/pages/Home】。此时我们可以在手机浏览器中输入:app名称://pages/Home来启动该App,并进入Home界面。)

  mode:定义跳转风格

     card:使用iOS和安卓默认的风格

     modal:iOS独有的使屏幕从底部画出。类似iOS的present效果

 headerMode:返回上级页面时动画效果

    float:iOS默认的效果

    screen:滑动过程中,整个页面都会返回

    none:无动画

 cardStyle:自定义设置跳转效果

 transitionConfig: 自定义设置滑动返回的配置

 onTransitionStart:当转换动画即将开始时被调用的功能

 onTransitionEnd:当转换动画完成,将被调用的功能

navigationOptions配置StackNavigator的一些属性

  title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用

  header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null

  headerTitle:设置导航栏标题

  headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可   以设置为null

 headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"      

 headerRight:设置导航条右侧。可以是按钮或者其他视图控件

headerLeft:设置导航条左侧。可以是按钮或者其他视图控件

headerStyle:设置导航条的样式。背景色,宽高等

headerTitleStyle:设置导航栏文字样式

headerBackTitleStyle:设置导航栏‘返回’文字样式

headerTintColor:设置导航栏颜色

headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0

gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭

4)界面跳转(传值与取值)

在界面组件注入到StackNavigator中时,界面组件就被赋予了navigation属性,即在界面组件中可以通过【this.props.navigation】获取并进行一些操作

  1)通过navigate实现页面跳转:

this.props.navigation.navigate('Test')

(其中'Test'为我们在StackNavigator注册界面组件时的名称)

  返回上一页:

this.props.navigation.goBack();

 2)传值

this.props.navigation.navigate('Test',{ user:  'Lucy' })

 3)取值

this.props.navigation.state.params.user

5)最后在index.android.js和index.ios.js文件下进行使用,两个文件代码一样,如下:

import React from 'react';
import {
  AppRegistry
} from 'react-native';

import {AppIndex} from './js/pages/AppIndexPage';

AppRegistry.registerComponent('NativeApp', () => AppIndex);

最后,关于react-navigation的具体介绍,可查看官网

© 著作权归作者所有

d
粉丝 1
博文 22
码字总数 16957
作品 0
杭州
私信 提问
加载中

评论(7)

风星舞
风星舞
不用纠结了,我测试过,这个延迟问题好像只有在debug模式才有,打成release包后运行没有延迟😂
风星舞
风星舞
你看过官方提供的expo项目展示没?上面的tab很流畅,不知是怎么做的
风星舞
风星舞
感觉不对啊,如果只是显示icon或者title,感觉还是很流畅的,就是在icon和title都显示时,会有明显的延迟,费解啊
d
djonce 博主

引用来自“风星舞”的评论

我的测试代码https://my.oschina.net/hu382337381/blog/1507327,在安卓上执行,我设置的pressColor是黄色,你可以试试,点击tabbar后在黄色涟漪之后才执行切换动作,效果应该很明显
原来是设置pressColor属性呀,原先理解成是文字和图标选中后的颜色效果。黄色涟漪效果与切换动作的执行事件上是有先后顺序的,pressColor这个属性是当手指按下(down事件)时触发的效果,而当手指抬起(up事件)pressColor的效果就没有了 这时会触发tab的点击事件(也就是上面的切换动作)。要改变这种状态的话,那我就不知道了。以上如有说错 望指正,谢谢
风星舞
风星舞
我的测试代码https://my.oschina.net/hu382337381/blog/1507327,在安卓上执行,我设置的pressColor是黄色,你可以试试,点击tabbar后在黄色涟漪之后才执行切换动作,效果应该很明显
d
djonce 博主

引用来自“风星舞”的评论

我现在也在用这个东东,但是在tabnavigator切换tabbar时,都是等presscolor显示后才执行切换动作,看起来就会有延迟,你知道怎么解决这个延迟问题吗?
你说的问题在ios或android系统上运行倒没遇到,不知道你是怎样实现的
风星舞
风星舞
我现在也在用这个东东,但是在tabnavigator切换tabbar时,都是等presscolor显示后才执行切换动作,看起来就会有延迟,你知道怎么解决这个延迟问题吗?
createBottomTabNavigator开发指南

期待已久的新教程上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 相当于iOS里面的TabBarController,屏幕下方的标签栏。如图: createBottomTabNavig...

JiaPengHui
2018/12/30
0
0
『React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

这篇文章将向大家分享createMaterialTopTabNavigator的一些开发指南和实用技巧。 createMaterialTopTabNavigator API (必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈...

JiaPengHui
01/07
0
0
React Native开发之react-navigation库详解

众所周知,在多页面应用程序中,页面的跳转是通过路由或导航器来实现的。在0.44版本之前,开发者可以直接使用官方提供的Navigator组件来实现页面的跳转,不过从0.44版本开始,Navigator被官方...

xiangzhihong
06/04
0
0
createMaterialTopTabNavigator

createMaterialTopTabNavigator createMaterialTopTabNavigator API(http://coding.imooc.com/class/304.html) (必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么...

不负好时光
03/17
61
0
createBottomTabNavigator

createBottomTabNavigator 相当于iOS里面的TabBarController,屏幕下方的标签栏。如图: createBottomTabNavigator API (必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由...

不负好时光
03/17
197
0

没有更多内容

加载失败,请刷新页面

加载更多

IntelliJ IDEA远程连接tomcat,实现单步调试

web项目部署到tomcat上之后,有时需要打断点单步调试,如果用的是Intellij idea,可以通过如下方法实现: 开启debug端口,启动tomcat 以tomcat7.0.75为例,打开bin目录下的catalina.bat文件,...

程序员欣宸
42分钟前
5
0
如何在 Bash 中对变量递增或者递减

导读 编写 Bash 脚本时最常见的算术运算之一是递增和递减变量。这通常在循环中用作计数器,但它也可以在脚本的其他地方出现。 递增和递减意味着分别从数值变量的值中添加或减去值(通常为 1 ...

问题终结者
47分钟前
3
0
如何使用ssh工具便于远程管理

前几天亲眼经历了Linux服务器运维过程,眼看着别人熟练运用Linux管理工具,自个心里不是滋味,所以自己特意整理了一篇“专题”:使用ssh服务远程管理主机。 首先在使用ssh服务工具之前,先熟...

Linux就该这么学
56分钟前
6
0
IT兄弟连 HTML5教程 介绍HTML5给你认识 习题

1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2.为了标识一个HTML文...

老码农的一亩三分地
今天
6
0
关于1加手机rom的分析过程

1、关于清理app缓存的信息 framework.jar和services.jar文件,都位于/system/framework目录下面 framework.jar的android.os.Intent类里面定义了action "android.intent.action.CLEAR_PKG",这......

shatian
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部