1.安装tab栏插件

npm i react-native-tab-navigator --save

2.引入对应的组件和tab插件

import { Platform, StyleSheet, Text, View,Image } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

3.复制以下代码到render()函数的return 里

两个图标的地址:

https://raw.githubusercontent.com/knightsj/GitHubPopular-SJ/master/github_client/res/images/ic_polular.png

https://raw.githubusercontent.com/knightsj/GitHubPopular-SJ/master/github_client/res/images/ic_trending.png
 <View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="最热"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({ selectedTab: 'home' })}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="趋势"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
<View style={styles.page2}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'test'}
title="测试"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({ selectedTab: 'test' })}>
<View style={styles.page3}></View>
</TabNavigator.Item>
</TabNavigator>
</View>

4.重新运行 react-native run-android

完整代码:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View,Image } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
}); export default class App 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="最热"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({ selectedTab: 'home' })}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="趋势"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
<View style={styles.page2}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'test'}
title="测试"
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({ selectedTab: 'test' })}>
<View style={styles.page3}></View>
</TabNavigator.Item>
</TabNavigator>
</View> );
}
} const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
page1: {
flex: 1,
backgroundColor: 'red'
},
page2: {
flex: 1,
backgroundColor: 'yellow'
},
page3: {
flex: 1,
backgroundColor: 'yellowgreen'
},
// react native里不用写单位
image: {
height: 22,
width: 22
}
});

效果:

react native底部tab栏切换的更多相关文章

  1. React Native 底部导航栏

    首先安装:npm install react-native-tab-navigator   然后再引入文件中    import TabNavigator from 'react-native-tab ...

  2. Vue(小案例)底部tab栏和顶部title栏的实现

    ---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容   1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应 ...

  3. Android自定义控件----RadioGroup实现APP首页底部Tab的切换

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

  6. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  7. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  8. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  9. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

随机推荐

  1. selenium验证码和错误截图

    验证码的识别: 1,破解验证码 OCR识别(一般使用tesseract-ocr) 人工智能(AI机器学习 TensorFlow,成本大) 2,绕过验证码 1, 让开发人员临时关闭验证码 2,提供万能验 ...

  2. iOS - 抖音效果

    抖音的转场动画—iOS https://www.jianshu.com/p/29b0165de712 抖音的上下滑实现—iOS https://www.jianshu.com/p/e8799510c7 ...

  3. MVC学习(四)几种分页的实现(1)

     这里,我使用的是Code-First,MVC3. 我们在数据库里建一个表MyTestPages,只有一个整型字段Id. 在写一个Model类MyTestPages,代码如下 public class ...

  4. call指令和ret指令配合实现子程序调用

    子程序的框架如下. 标号: 指令 ret 具有子程序的源程序的框架如下. assume cs:code code segment main: : : call sub1 : : mov ax,4c00 ...

  5. Spring配置文件XML详解

    1.bean的基本属性配置: <!-- id是bean的标识符,必须唯一,如果没有配置id,name默认为标识符 如果配置了id,有配置了name,那么name为别名 name可以设置多个别名, ...

  6. centos7下haproxy1.7的使用与配置

    centos7下haproxy1.7的使用与配置 haproxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. 一.haproxy下载 ...

  7. c# 运行大运算程序主窗体卡掉的解决

    写了一个运算过滤大文本的程序, 其中方法里边使用了多线程,并行线程等方法.  但主窗体控件直接使用此方法时,页面卡顿.所以主线程被堵塞. 代码如下, splitfile 这个方法运行时页面卡顿,阻塞了 ...

  8. linux系统web站点设置-http基础设置

    一.httpd2.2的组成: /etc/httpd:服务器的根目录 conf/httpd.conf,conf.d/*:配置文件 conf/magic:MIME的配置文件 logs:日志文件的存放路径, ...

  9. 卸载服务器GitLab

    sudo gitlab-ctl uninstall sudo rpm -e gitlab-ce find / -name gitlab|xargs rm -rf

  10. 6.26实力测试(小错笑cry)

    6.26测试 本次考试的粗心不忍吐槽(自带贴吧喷水表情),本次考试主要考察的知识点如下: 算法的分析与精简 暴力枚举输出字符 判断与枚举的综合考察 题目 第一题 [问题描述] 在一口井里,有一只神牛( ...