React Native商城项目实战02 - 主要框架部分(tabBar)
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)的更多相关文章
- React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...
- React Native商城项目实战01 - 初始化设置
1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...
- React Native商城项目实战11 - 个人中心头部内容
1.创建MineHeaderView.js /** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegist ...
- React Native商城项目实战10 - 个人中心中间内容设置
1.新建一个MineMiddleView.js,专门用于构建中间的内容 /** * 个人中心中间内容设置 */ import React, { Component } from 'react'; im ...
- React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...
- React Native商城项目实战05 - 设置首页的导航条
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- React Native商城项目实战06 - 设置安卓中的启动页
1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...
- React Native商城项目实战03 - 包装Navigator
1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...
- React Native商城项目实战16 - 购物中心详细页
逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据: ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCent ...
随机推荐
- 3.学习Dispatcher
3.学习Dispatcher 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是子线程. 在WPF或WinForm应用程序中,主 ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
- python程序超时处理 timeout_decorator
如下两个例子,实现对某个函数的超时处理(其实就是加了一个装饰器timeout): 成功例子: 代码: import time import timeout_decorator @timeout_dec ...
- 【转】ubuntu或linux网卡配置/etc/network/interfaces
转自:https://www.cnblogs.com/qiuxiangmuyu/p/6343841.html 青蛙准备写一个系列文章,介绍一些Debian/Ubuntu里面常用的配置文件.当然,Lin ...
- 009-saltstack之salt-ssh的使用及配置管理LAMP状态的实现
1.salt-ssh的使用 官方文档:https://docs.saltstack.com/en/2016.11/topics/ssh/index.html (1)安装salt-ssh [root@l ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(2)|VSCODE配置]
我们今天来配置下vscode+rust. vscode开发rust很方便.但配置有点坑,我们都认为vscode很简单,很完善. 但这里很多同学也出现不少问题. 我们在这里简单记录下win7下配置的过程 ...
- 公司内网机器vm ubuntu proxy 设置
解决浏览器上网问题: System Setting -> Network -> Network Proxy设置公司的代理 解决apt联网问题: 在/etc/apt/apt.conf文件里加 ...
- 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 ...
- kong CentOS7网关安装
1.先安装postgres数据库,yum安装.yum install postgresql96yum install postgresql96-server配置环境变量export PGDATA=/v ...
- linux常用的命令一:系统工作命令
系统工作命令: 帮助命令:man -h \ man --help(tips:‘--’长格式后用完整的选项名称,‘-’短格式后用单个字母缩写) echo命令:格式:echo [字符串|$变量] date ...