在 App 中 tab 是常见的页面类型,在 RN 里使用 react-navigation 可快速地进行 tab 配置。

假设应用有4个页面,两个是tab页面,两个是详情页面。

App.js

//应用实际场景是有redux的,这里就不删除了。不使用rudex的话,直接 return <Router />就 ok 啦!
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './store';
import Router from './router'; let store = configureStore(); export default class App extends Component {
render() {
return (
<Provider store={store.store} style={{ flex: 1 }}>
<PersistGate persistor={store.persistor}>
<Router />
</PersistGate>
</Provider>
);
}
};

router.js

import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import React from 'react';
import { Image } from 'react-native'; import Index from './view/index';
import Center from './view/center';
import Detail1 from './view/detail1';
import Detail2 from './view/detail2'; const TabNavigator = createBottomTabNavigator({
Index: {
screen: Index,
navigationOptions: {
title: '首页'
}
},
Center: {
screen: Center,
navigationOptions: {
title: '我的'
}
},
}, tabBarConfig); const AppNavigator = createStackNavigator({
Tab: TabNavigator,
Detail1: Detail1
Detail2: Detail2
}, { headerMode: 'none' });//删除每个页面的头(一般使用自定义的) export default createAppContainer(AppNavigator); const tabBarConfig = { //tab的一些配置
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {//处理tab icon
const { routeName } = navigation.state;
let iconUrl;
switch (routeName) {
case 'Center':
iconUrl = focused ? require('./assets/imgs/me-full.png') : require('./assets/imgs/me.png');
break;
default:
iconUrl = focused ? require('./assets/imgs/mv-full.png') : require('./assets/imgs/mv.png');
break;
}
return <Image source={iconUrl} style={{ width: 25, height: 25 }} />;
},
}),
tabBarOptions: {
activeTintColor: '#fd0',
inactiveTintColor: '#666',
labelStyle: {
fontSize: 14
},
style: {
backgroundColor: '#fafafa',
}
}
}

应用中,跳转非tab页面,建议使用push跳转,跳转tab建议使用navigate进行跳转。

<Text onPress={() => this.props.navigation.navigate('Center')}>跳转Center</Text>
<Text onPress={() => this.props.navigation.push('Detail1')}>跳转Detail</Text>

react-native——tab配置及跳转的更多相关文章

  1. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  2. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  3. React Native之配置URL Scheme(iOS Android)

    React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...

  4. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  5. React Native之使用导航器跳转页面(react-navigation)

    react-navigation是一个导航库,要使用react-navigation来实现跳转页面,首先得在项目中安装此库,由于Yarn是Facebook提供的替代npm的工具,可以加速node模块的 ...

  6. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  7. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  8. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  9. react native 环境配置

    1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...

随机推荐

  1. pytorch标准化后的图像数据如果反标准化保存

    1.数据处理代码utils.py: 1) # coding:utf- import os import torch.nn as nn import numpy as np import scipy.m ...

  2. Spring cloud微服务安全实战-4-11Zuul网关安全开发(四)

    限流,有个现成的开源项目可以帮助我们来做网关上的限流 用最新的这个版本 在pom.xml加入引用. 在限流的过程中需要存一些信息,可以存在数据库里 也可以存在redis里.这里我们演示存到数据库里 比 ...

  3. 函数和宏实现打印的增强myprintf

    函数和宏实现打印的增强

  4. Flink 自定义source和sink,获取kafka的key,输出指定key

    --------20190905更新------- 沙雕了,可以用  JSONKeyValueDeserializationSchema,接收ObjectNode的数据,如果有key,会放在Objec ...

  5. 实现Modbus TCP多网段客户端应用

    对于Modbus TCP来说与Modbus RTU和Modbus ASCII有比较大的区别,因为它是运行于以太网链路之上,是运行于TCP/IP协议之上的一种应用层协议.在协议栈的前两个版本中,Modb ...

  6. DevExpress v18.1 下载和教程文档

    http://www.zdfans.com/html/18682.html 教程文档 https://blog.csdn.net/AABBbaby/article/details/81094482 下 ...

  7. new (std::nothrow) 与 new

    普通new一个异常的类型std::bad_alloc.这个是标准适应性态. 在早期C++的舞台上,这个性态和现在的非常不同:new将返回0来指出一个失败,和malloc()非常相似. 在内存不足时,n ...

  8. 【Leetcode_easy】908. Smallest Range I

    problem 908. Smallest Range I solution: class Solution { public: int smallestRangeI(vector<int> ...

  9. Node.js Sequelize如何实现数据库的读写分离

    一.前言 在构建高并发的Web应用时,除了应用层要采取负载均衡方案外,数据库也要支持高可用和高并发性.使用较多的数据库优化方案是:通过主从复制(Master-Slave)的方式来同步数据,再通过读写分 ...

  10. AWS 数据传输加速(八)

    AWS CloudFront 概述 一个CDN服务,加快网页和其它下载全球分布式网络缓存服务器 CloudFront通过全球性的边缘站点将内容缓存到世界各地实现CDN 在更邻近的位置提供更低的延迟,更 ...