原生项目中,我们对底部Tab 很熟悉,点击Tab标签可以切换页面,那么在React-Native 中我们该怎么实现呢。

在查了文档后,我们找到了一个TabBarIos ,这个是ios 下使用的Tab 标签,但是没有找到Android 可以使用的,因此 我们需要自己实现,或者使用第三方的,这里,刚接触React不太会自己实现,因此使用github上开源的react-native-tab-navigator,来实现切换的功能。

使用步骤:

安装

Make sure that you are in your React Native project directory and run:

npm install react-native-tab-navigator --save

使用

Import TabNavigator as a JavaScript module:

import TabNavigator from 'react-native-tab-navigator';

This is an example of how to use the component and some of the commonly used props that it supports:

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

See TabNavigatorItem's supported props for more info.

/**
 * tabbar  demo
 */

'use strict'
import TabNavigator from 'react-native-tab-navigator'
import React, {Component} from 'react';
import styles from '../Styles/Main';
import MovieList from './MovieList';
import {
    View,
    Image,
}from 'react-native';
import USBox from "./USBox";
const TAB_NORMAL_1=require('../Images/bottom_bar_01.png');
const TAB_PRESS_1 =require('../Images/bottom_bar_01_selected.png');
const TAB_NORMAL_2=require('../Images/bottom_bar_02.png');
const TAB_PRESS_2=require('../Images/bottom_bar_02_selected.png');
export default class TabBarComponent extends Component{

    constructor(props) {
        super(props);
        this.state={
            selectedTab:'home',
        }
    }
        render(){
            return(
                <View  style={styles.Container}>

                    <TabNavigator>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'home'}
                            title="Home"
                            renderIcon={() => <Image source={TAB_NORMAL_1} style ={styles.icon} />}
                            renderSelectedIcon={() => <Image source={TAB_PRESS_1}style ={styles.icon}  />}
                            badgeText="1"
                            onPress={() => this.setState({ selectedTab: 'home' })}>
                            <MovieList />
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'profile'}
                            title="Profile"
                            renderIcon={() => <Image source={TAB_NORMAL_2} style ={styles.icon} />}
                            renderSelectedIcon={() => <Image source={TAB_PRESS_2} style ={styles.icon} />}

                            onPress={() => this.setState({ selectedTab: 'profile' })}>
                            <USBox />
                        </TabNavigator.Item>
                    </TabNavigator>
                </View>
            );
    }
}

实现Tab切换功能的代码就是 return 中的TabNavigator ,这里我添加了两个Tab标签。

标签构建基本介绍:

selected: bool型,是否选中状态,可使用setState进行控制,默认false
title: 标题,String类型,非必填
renderIcon: 必填项,即图标,但为function类型,所以这里需要用到Arrow Function
renderSelectedIcon: 选中状态的图标,非必填,也是function类型
onPress: function型,即点击事件的回调函数,这里需要控制的是state,而切换页面已经由控件本身帮我们实现好了

ps:记得在构造方法中指定默认选中标签: selectedTab。

指定两个Tab 切换要展示的页面  <MovieList />和 <USBox />。

实现效果:

源码下载

-----------------------------期待大神们的到来

------------------------一---起分享,一起进步!需要你们

React-Native进阶_4.底部标签栏TabBar的更多相关文章

  1. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  2. react native进阶

    一.前沿||潜心修心,学无止尽.生活如此,coding亦然.本人鸟窝,一只正在求职的鸟.联系我可以直接微信:jkxx123321 二.项目总结 **||**文章参考资料:1.  http://blog ...

  3. [RN] React Native 下实现底部标签(不支持滑动切换)

    底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...

  4. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  6. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

  7. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  8. react native 底部按钮切换

    在react   native  中底部按钮的切换  主要的是运用的是<TabBarNavigator/>这个组件,具体的代码实现如下: render() { return ( <T ...

  9. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

随机推荐

  1. 20145216史婧瑶《Java程序设计》第四次实验报告

    实验四 Android环境搭建 实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 1.搭建Android环境 2.安装Android,核心是配置JDK.SDK 3. ...

  2. 20145301《Java程序设计》实验二报告:Java面向对象程序设计

    20145301<Java程序设计>实验二报告:Java面向对象程序设计 课程:Java程序设计 实验名称:Java面向对象程序设计 实验目的与要求: 初步掌握单元测试和TDD 理解并掌握 ...

  3. 20145312 《Java程序设计》第九周学习总结

    20145312 <Java程序设计>第九周学习总结 学习笔记 Chapter 16整合数据库 16.1 JDBC入门 16.1.1 JDBC简介 SUN公司为了简化.统一对数据库的操作, ...

  4. 20145312《Java第一次实验报告》

    20145312<Java第一次实验报告> Java开发环境的熟悉(Windows+Idea) 一.实验内容 使用Idea编辑.编译.运行.调试Java程序. 使用JDK编译.运行简单的J ...

  5. Hive创建一个简单的UDF

    创建一个类 package com.dufeng.hive; import org.apache.commons.lang.StringUtils; import org.apache.hadoop. ...

  6. Pomelo热更新刷新handler和remote 以及 pomelo使用bearcat进行热更新

    一. 开启 原生 pomelo 的hotreload支持 pomelo版本: 2.2.5 , 编辑脚本 app.js 加入如下代码 //全局配置 app.configure('production|d ...

  7. excel表中同一列相同内容进行合并

    如下图所示一张表格,如果想要把表格中相同考号的信息合并来查看的话,首先我们先通过表格的排序功能,把相同的内容先排列在一起.在数据选项卡下找到排序点就可以.   第二步,选中整个数据区域,在数据选项卡下 ...

  8. 【网络优化】Batch Normalization(inception V2) 论文解析(转)

    前言 懒癌翻了,这篇不想写overview了,公式也比较多,今天有(zhao)点(jie)累(kou),不想一点点写latex啦,读论文的时候感觉文章不错,虽然看似很多数学公式,其实都是比较基础的公式 ...

  9. UVa 11038 有多少个0

    https://vjudge.net/problem/UVA-11038 题意: 输入两个非负整数m和n,求将m~n的所有整数写出来,一共要写多少个数字0? 思路: 举个例子来说: 12345 从右到 ...

  10. du,df 磁盘管理

    du会把指定目录下所有文件.目录.目录下的文件都统计.是建立在文件系统能看到的的确确是有这样一些文件的基础上的.也就是说我们能在文件系统里面看到的文件才会被du统计. df命令可以获取硬盘被占用了多少 ...