React-Native进阶_4.底部标签栏TabBar
原生项目中,我们对底部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的更多相关文章
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- react native进阶
一.前沿||潜心修心,学无止尽.生活如此,coding亦然.本人鸟窝,一只正在求职的鸟.联系我可以直接微信:jkxx123321 二.项目总结 **||**文章参考资料:1. http://blog ...
- [RN] React Native 下实现底部标签(不支持滑动切换)
底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- react native 底部按钮切换
在react native 中底部按钮的切换 主要的是运用的是<TabBarNavigator/>这个组件,具体的代码实现如下: render() { return ( <T ...
- React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
随机推荐
- 20145216史婧瑶《Java程序设计》第四次实验报告
实验四 Android环境搭建 实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 1.搭建Android环境 2.安装Android,核心是配置JDK.SDK 3. ...
- 20145301《Java程序设计》实验二报告:Java面向对象程序设计
20145301<Java程序设计>实验二报告:Java面向对象程序设计 课程:Java程序设计 实验名称:Java面向对象程序设计 实验目的与要求: 初步掌握单元测试和TDD 理解并掌握 ...
- 20145312 《Java程序设计》第九周学习总结
20145312 <Java程序设计>第九周学习总结 学习笔记 Chapter 16整合数据库 16.1 JDBC入门 16.1.1 JDBC简介 SUN公司为了简化.统一对数据库的操作, ...
- 20145312《Java第一次实验报告》
20145312<Java第一次实验报告> Java开发环境的熟悉(Windows+Idea) 一.实验内容 使用Idea编辑.编译.运行.调试Java程序. 使用JDK编译.运行简单的J ...
- Hive创建一个简单的UDF
创建一个类 package com.dufeng.hive; import org.apache.commons.lang.StringUtils; import org.apache.hadoop. ...
- Pomelo热更新刷新handler和remote 以及 pomelo使用bearcat进行热更新
一. 开启 原生 pomelo 的hotreload支持 pomelo版本: 2.2.5 , 编辑脚本 app.js 加入如下代码 //全局配置 app.configure('production|d ...
- excel表中同一列相同内容进行合并
如下图所示一张表格,如果想要把表格中相同考号的信息合并来查看的话,首先我们先通过表格的排序功能,把相同的内容先排列在一起.在数据选项卡下找到排序点就可以. 第二步,选中整个数据区域,在数据选项卡下 ...
- 【网络优化】Batch Normalization(inception V2) 论文解析(转)
前言 懒癌翻了,这篇不想写overview了,公式也比较多,今天有(zhao)点(jie)累(kou),不想一点点写latex啦,读论文的时候感觉文章不错,虽然看似很多数学公式,其实都是比较基础的公式 ...
- UVa 11038 有多少个0
https://vjudge.net/problem/UVA-11038 题意: 输入两个非负整数m和n,求将m~n的所有整数写出来,一共要写多少个数字0? 思路: 举个例子来说: 12345 从右到 ...
- du,df 磁盘管理
du会把指定目录下所有文件.目录.目录下的文件都统计.是建立在文件系统能看到的的确确是有这样一些文件的基础上的.也就是说我们能在文件系统里面看到的文件才会被du统计. df命令可以获取硬盘被占用了多少 ...