1.安装插件,cd到项目根目录下执行:

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

2.主框架文件Main.js

/**
* 主页面
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Platform //判断当前运行的系统
} from 'react-native'; /*=============导入外部组件类==============*/
import TabNavigator from 'react-native-tab-navigator';
var Home = require('../Home/Home');
var Shop = require('../Shop/Shop');
var Mine = require('../Mine/Mine');
var More = require('../More/More'); // ES5
var Main = React.createClass({
// 初始化函数(变量是可以改变的,充当状态机的角色)
getInitialState(){
return{
selectedTab:'home' // 默认选中的tabBar
}
}, render() {
return (
<TabNavigator>
{/*--首页--*/}
<TabNavigator.Item
title="首页"
renderIcon={() => <Image source={{uri:'icon_tabbar_homepage'}} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_homepage_selected'}} style={styles.selectedIconStyle} />}
badgeText="1"
selected={this.state.selectedTab === 'home'}
onPress={() => this.setState({ selectedTab: 'home' })}
>
<Home />
</TabNavigator.Item>
{/*--商家--*/}
<TabNavigator.Item
title="商家"
renderIcon={() => <Image source={{uri:'icon_tabbar_merchant_normal'}} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_merchant_selected'}} style={styles.selectedIconStyle} />}
badgeText="1"
selected={this.state.selectedTab === 'shop'}
onPress={() => this.setState({ selectedTab: 'shop' })}
>
<Shop />
</TabNavigator.Item>
{/*--我的--*/}
<TabNavigator.Item
title="我的"
renderIcon={() => <Image source={{uri:'icon_tabbar_mine'}} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_mine_selected'}} style={styles.selectedIconStyle} />}
badgeText="1"
selected={this.state.selectedTab === 'mine'}
onPress={() => this.setState({ selectedTab: 'mine' })}
>
<Mine />
</TabNavigator.Item>
{/*--更多--*/}
<TabNavigator.Item
title="更多"
renderIcon={() => <Image source={{uri:'icon_tabbar_misc'}} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={{uri:'icon_tabbar_misc_selected'}} style={styles.selectedIconStyle} />}
badgeText="1"
onPress={() => this.setState({ selectedTab: 'more' })}
selected={this.state.selectedTab === 'more'}
>
<More />
</TabNavigator.Item>
</TabNavigator>
);
}
}); const styles = StyleSheet.create({
iconStyle:{
width: Platform.OS === 'ios' ? 30 : 25,
height:Platform.OS === 'ios' ? 30 : 25,
},
selectedIconStyle:{
width:Platform.OS === 'ios' ? 30 : 25,
height:Platform.OS === 'ios' ? 30 : 25,
},
}); // 输出
module.exports = Main;

3.预览效果

React Native商城项目实战02 - 主要框架部分(tabBar)的更多相关文章

  1. React Native商城项目实战04 - 封装TabNavigator.Item的创建

    1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...

  2. React Native商城项目实战01 - 初始化设置

    1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...

  3. React Native商城项目实战11 - 个人中心头部内容

    1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegist ...

  4. React Native商城项目实战10 - 个人中心中间内容设置

    1.新建一个MineMiddleView.js,专门用于构建中间的内容 /** * 个人中心中间内容设置 */ import React, { Component } from 'react'; im ...

  5. React Native商城项目实战07 - 设置“More”界面导航条

    1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...

  6. React Native商城项目实战05 - 设置首页的导航条

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  7. React Native商城项目实战06 - 设置安卓中的启动页

    1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...

  8. React Native商城项目实战03 - 包装Navigator

    1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...

  9. React Native商城项目实战16 - 购物中心详细页

    逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据: ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCent ...

随机推荐

  1. 3.学习Dispatcher

    3.学习Dispatcher 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是子线程. 在WPF或WinForm应用程序中,主 ...

  2. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

  3. python程序超时处理 timeout_decorator

    如下两个例子,实现对某个函数的超时处理(其实就是加了一个装饰器timeout): 成功例子: 代码: import time import timeout_decorator @timeout_dec ...

  4. 【转】ubuntu或linux网卡配置/etc/network/interfaces

    转自:https://www.cnblogs.com/qiuxiangmuyu/p/6343841.html 青蛙准备写一个系列文章,介绍一些Debian/Ubuntu里面常用的配置文件.当然,Lin ...

  5. 009-saltstack之salt-ssh的使用及配置管理LAMP状态的实现

    1.salt-ssh的使用 官方文档:https://docs.saltstack.com/en/2016.11/topics/ssh/index.html (1)安装salt-ssh [root@l ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|(2)|VSCODE配置]

    我们今天来配置下vscode+rust. vscode开发rust很方便.但配置有点坑,我们都认为vscode很简单,很完善. 但这里很多同学也出现不少问题. 我们在这里简单记录下win7下配置的过程 ...

  7. 公司内网机器vm ubuntu proxy 设置

    解决浏览器上网问题: System Setting -> Network -> Network Proxy设置公司的代理 解决apt联网问题: 在/etc/apt/apt.conf文件里加 ...

  8. 2017年全国卷3的21题与2018年全国卷3的21题命题背景是同一个函数$y=\frac{2x}{\ln(x+1)}$(再次瞎谈)

    2017年四川高考数学(全国卷3)理科21题第1问 已知函数\(f(x)=x-1-a\ln x\) (1)若\(f(x)\geqslant 0\),求\(a\)的值\(.\) 该不等式等价于$a\ln ...

  9. kong CentOS7网关安装

    1.先安装postgres数据库,yum安装.yum install postgresql96yum install postgresql96-server配置环境变量export PGDATA=/v ...

  10. linux常用的命令一:系统工作命令

    系统工作命令: 帮助命令:man -h \ man --help(tips:‘--’长格式后用完整的选项名称,‘-’短格式后用单个字母缩写) echo命令:格式:echo [字符串|$变量] date ...