配置Tab栏

配置Tab栏的图标

注意:使用图标,需要接收 license;

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native'; // 导入 Tabbar 相关的组件
import TabNavigator from 'react-native-tab-navigator' // 导入 Tab 栏的组件
import Home from './components/tabbars/Home.js'
import Search from './components/tabbars/Search.js'
import ShopCar from './components/tabbars/ShopCar.js'
import Me from './components/tabbars/Me.js' // 当修改了 项目根目录中,Android 目录下的任何文件之后,如果想要看项目效果,不要使用 react-native start了,而是需要再一次编译安装一下项目 ,运行 react-native run-android
// 导入图标相关的组件
import Icon from 'react-native-vector-icons/FontAwesome' export default class App extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: 'home' // 选中的tab栏名称
}
} render() {
return (
<View style={styles.container}> {/* Tab栏区域 */}
<TabNavigator> {/* 主页的 Tab栏 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'home'} // 判断当前的 tab栏是否被选中的
title="主页" // 表示 tabbar 上展示的内容
renderIcon={() => <Icon name="home" size={25} color="gray" />} // 未选中状态下,展示的图标
renderSelectedIcon={() => <Icon name="home" size={25} color="#0079FF" />} // 选中状态下展示的图标
onPress={() => this.setState({ selectedTab: 'home' })} // 点击Tab栏的操作
>
<Home></Home>
</TabNavigator.Item> {/* 搜索的 Tab栏 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'search'}
title="搜索"
renderIcon={() => <Icon name="search" size={25} color="gray" />}
renderSelectedIcon={() => <Icon name="search" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'search' })}
>
<Search></Search>
</TabNavigator.Item> {/* 购物车的 Tab栏 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'shopcar'}
title="购物车"
badgeText="0"
renderIcon={() => <Icon name="shopping-cart" size={25} color="gray" />}
renderSelectedIcon={() => <Icon name="shopping-cart" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'shopcar' })}
>
<ShopCar></ShopCar>
</TabNavigator.Item> {/* Me的 Tab栏 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'me'}
title="Me"
renderIcon={() => <Icon name="user" size={25} color="red" />}
renderSelectedIcon={() => <Icon name="user-o" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'me' })}
>
<Me></Me>
</TabNavigator.Item> </TabNavigator> </View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1
}
}); // 不推荐使用 npm 下载包,首先:下载速度慢,其次,如果是 npm 5.x,在装新包的时候,会把一些老包删除
// 推荐使用 facebook 开发的 yarn 来安装包 yarn add 包名

react-native构建基本页面1---主页:tab栏的更多相关文章

  1. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  2. react native (1) 新建页面并跳转

    新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...

  3. react native tap切换页面卡顿

    问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...

  4. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  5. React Native登录注册页面实现空白处收起键盘

    其实很简单,直接使用ScrollView作为父视图即可.有木有很神奇啊,以前都还不知道呢.....

  6. 【React Native】某个页面禁用物理返回键

    1.引入组件 import { BackHandler, } from 'react-native'; 2.添加监听 componentDidMount(): void { BackHandler.a ...

  7. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  8. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  9. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  10. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

随机推荐

  1. 面试官:你说你熟悉jvm?那你讲一下并发的可达性分析

    这是why技术的第35篇原创文章 上面这张图是我还是北漂的时候,在鼓楼附近的胡同里面拍的. 那天刚刚下完雨,路过这个地方的时候,一瞬间就被这五颜六色的门板和自行车给吸引了,于是拍下了这张图片.看到这张 ...

  2. drf认证组件、权限组件、jwt认证、签发、jwt框架使用

    目录 一.注册接口 urls.py views.py serializers.py 二.登录接口 三.用户中心接口(权限校验) urls.py views.py serializers.py 四.图书 ...

  3. Django 博客单元测试:测试评论应用

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 评论应用的测试和博客应用测试的套路是一样的. 先来建立测试文件的目录结构.首先在 c ...

  4. jmeter脚本调试过程

    1.添加监听器:查看结果树,再回放脚本 2.权限验证,例如:cookies a.谷歌浏览器F12获取session

  5. nuget打包上传

    准备工作 下载nuget.exe,以及gui推送编辑工具 Nuget Package Explorer (可选) 设置nuget环境变量. 流程 完成项目 cmd控制台cd到项目目录下(项目目录不是解 ...

  6. .netcore 3.1高性能微服务架构:封装调用外部服务的接口方法--HttpClient客户端思路分析

    众所周知,微服务架构是由一众微服务组成,项目中调用其他微服务接口更是常见的操作.为了便于调用外部接口,我们的常用思路一般都是封装一个外部接口的客户端,使用时候直接调用相应的方法.webservice或 ...

  7. VEH帮你定位程序崩溃地址

    之前朋友有一个服务端程序,总是受到一些人的恶意漏洞攻击,没有源代码,只好反汇编修复了漏洞,并且使用WinLicense加保护授权. 漏洞总不是一次可以修复完的,恶意攻击并没有停止,然后加了WL保护程序 ...

  8. [PHP] 使用PHP在mongodb中进行嵌套查询

    作为文档数据库,数据库中存储的数据是类似json的结构,比如{“modelInfo”:{"status":1,audited:"1"}},想要查询status是 ...

  9. Docker Stack 学习笔记

    该文为<深入浅出Docker>的学习笔记,感谢查看,如有错误,欢迎指正 一.简介 Docker Stack 是为了解决大规模场景下的多服务部署和管理,提供了期望状态,滚动升级,简单易用,扩 ...

  10. exp导出含有双引号的表

    由于ORACLE默认的表名都是不区分大小写,在创建表时,在数据字典中存储的表名为大写.在有些情况下,如果创建的表在表名上加上双引号("),则创建的表其表名在数据字典中不作转换.比如 SQL& ...