配置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. vs工程配置eslint检测环境

    vs工程打开一个js文件,会提示 "No ESLint configuration (e.g .eslintrc) found for file ......." 或 " ...

  2. javascript中onclick(this)用法介绍

    this指触发事件的对象 代码如下: <input id="myinput" type="text" value="javascript中onc ...

  3. Lambda如何实现条件去重distinct List,如何实现条件分组groupBy List

    条件去重 我们知道, Java8 lambda自带的去重为 distinct 方法, 但是只能过滤整体对象, 不能实现对象里的某个值进行判定去重, 比如: List<Integer> nu ...

  4. springboot之swagger快速启动(新的ui)

    springboot之swagger快速启动(新的ui) 功能点: 集成swagger前端接口文档 Swagger 整合 zuul 智能列表 无缝集成 knife4j 前端文档 支持 v0.1.2RE ...

  5. java设计模式1——单例模式

    java设计模式1--单例模式 1.单例模式介绍 1.1.核心作用:保证一个类只有一个实例,并且提供一个访问该实例的全局访问点 1.2.常见场景 1.3.单例模式的优点 1.4.常见的五种单例模式实现 ...

  6. Android事件分发与责任链模式

    一.责任链模式 责任链模式是一种行为模式,为请求创建一个接收者的对象链.这样就避免,一个请求链接多个接收者的情况.进行外部解耦.类似于单向链表结构. 优点: 1. 降低耦合度.它将请求的发送者和接收者 ...

  7. codeforces 1301C Ayoub's function

    题目链接:http://codeforces.com/problemset/problem/1301/C 思路: 纯想想了一次,发现one_cnt >= zero_cnt的时候很简单,就是(n) ...

  8. 加速github访问速度

    打开https://www.ipaddress.com/ 查询以下三个链接的DNS解析地址 github.com assets-cdn.github.com github.global.ssl.fas ...

  9. Android Studio 快捷方式记录

  10. 持续更新phpstorm h和pycharm 激活码

    1.hosts文件写入 0.0.0.0 account.jetbrains.com0.0.0.0 www.jetbrains.com 2.激活码: AHD9079DKZ-eyJsaWNlbnNlSWQ ...