React Native商城项目实战02 - 主要框架部分(tabBar)
2023-09-11 14:15:30 时间
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.预览效果
相关文章
- rails项目编写中的一些小技巧小心得
- Spring项目读取resource下的文件
- springmvc+mybatis+maven项目框架搭建
- DSP5509项目之用FFT识别钢琴音调(1)
- 权限管理系统之项目框架搭建并集成日志、mybatis和分页
- IDEA中MAVEN项目有多个子目录,如何加载构建
- python-django框架-电商项目-订单模块开发_20191125
- 【HIBERNATE框架开发之二】第一个HIBERNATE-ANNONATION项目(采用@ENTITY、@ID直接映射实体类)
- Android[第三方or官方]高质量实用【组件&开源项目&框架】集合贴
- 使用maven编译Java项目
- Atitit 技术体系路线图与金字塔模型 前端技术层次金字塔 目录 1. 原理core >> 框架层 》》 模块 项目层1 1.1. 技术原理层1 1.2. 框架层1 1.3. 模块1 2.
- atitit.attilax.com产品 软件项目通用框架类库总结
- 不会性能优化?你还差这一份《Android互联网公司性能优化项目实战》合集
- 【项目实战】并发编程之Java集合框架中的一个线程安全的队列实现 —— LinkedBlockingQueue入门介绍
- 华为云·云享专家公开课:45分钟掌握Python项目部署与调度核心逻辑直播
- 【华为云技术分享】使用keil5打开GD32F450i的MDK项目出现的问题以及J-Link无法烧录程序对应的解决方案
- 【阶段四】Python深度学习09篇:深度学习项目实战:循环神经网络处理时序数据项目实战:CNN和RNN组合模型
- 【阶段三】Python机器学习19篇:机器学习项目实战:AdaBoost分类模型
- linux驱动开发重点关注内容--摘自《嵌入式Linux驱动模板精讲与项目实践》
- [h5棋牌项目]-08-请安装所需的版本的 Windows SDK 或者在项目属性页的问题解决方案
- SQLServer 复制中移除和加入公布而不初始化全部项目
- 求教:在SpringBoot框架下基于MAVEN的多模块项目,怎么进行DAO层的单元测试?
- 六步搭建机器学习项目雏形框架
- IDEA中Java项目删除Web框架后无法再次添加Web框架解决办法
- 【项目实战】分布式定时任务框架XXL-JOB核心源码分析 - 作业调度和执行 (路由策略介绍)
- 【项目实战】分布式定时任务框架XXL-JOB核心源码分析 - 作业调度和执行
- 【项目实战】分布式计算和通信框架(AKKA)入门介绍
- 【项目实战】参考若依的前端框架去多环境
- 解决Visual Studio同一个项目工程下不同C语言程序之间互相调用的问题