html京东快速购物导航,基于React Native构建的仿京东客户端(五)如何实现首页 分类 发现 购物车 我的 Tab导航页面..._小兔usako的博客-程序员秘密

技术标签: html京东快速购物导航  

新建4个用红色方框标识的文件,如下图所示:

6dfa3915f40dd31fdd667bd9a5e0296c.png

myths-Mac:JdApp myth$ yarn add react-native-tab-navigator

CartPage.js文件完整的代码如下:

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View

} from 'react-native';

export default class CartPage extends Component {

render() {

return (

CartPage

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

CategoryPage.js文件完整的代码如下:

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View

} from 'react-native';

export default class CategoryPage extends Component {

render() {

return (

CategoryPage

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

DiscoverPage.js文件完整的代码如下:

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View

} from 'react-native';

export default class DiscoverPage extends Component {

render() {

return (

DiscoverPage

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

PersonalPage.js文件完整的代码如下:

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View

} from 'react-native';

export default class PersonalPage extends Component {

render() {

return (

DiscoverPage

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

App.js文件完整的代码如下:

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View,

Image

} from 'react-native';

import Header from './Header';

import HomePage from './home/HomePage';

import CategoryPage from './category/CategoryPage';

import DiscoverPage from './discover/DiscoverPage';

import CartPage from './cart/CartPage';

import PersonalPage from './personal/PersonalPage';

import TabNavigator from 'react-native-tab-navigator';

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

selectedTab: 'home',

homeBadgeText:'15',

categoryBadgeText:'',

discoverBadgeText:'',

cartBadgeText:'',

personalBadgeText:'',

}

}

render() {

return (

selected={this.state.selectedTab === 'home'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.homeBadgeText === ''? null:

{this.state.homeBadgeText}

}

onPress={() => this.setState({selectedTab: 'home'})}>

selected={this.state.selectedTab === 'category'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.categoryBadgeText === ''? null:

{this.state.categoryBadgeText}

}

onPress={() => this.setState({selectedTab: 'category'})}>

selected={this.state.selectedTab === 'discover'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.discoverBadgeText === ''? null:

{this.state.discoverBadgeText}

}

onPress={() => this.setState({selectedTab: 'discover'})}>

selected={this.state.selectedTab === 'cart'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.cartBadgeText === ''? null:

{this.state.cartBadgeText}

}

onPress={() => this.setState({selectedTab: 'cart'})}>

selected={this.state.selectedTab === 'personal'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.personalBadgeText === ''? null:

{this.state.personalBadgeText}

}

onPress={() => this.setState({selectedTab: 'personal'})}>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

tab: {

height: 54,

backgroundColor: '#303030',

flexDirection: 'row',

},

tabIcon: {

width: 30,

height: 35,

resizeMode: 'stretch',

}

});

App.js文件中新增加的代码下图已用方框标出:

583b7c4f329fc39c21f27f67a768e389.png

安卓和苹果手机在模拟器中运行的效果截图如下:

520621b1a7c90f3d1e6b0b8bcbda6bff.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_29491635/article/details/117875743

智能推荐

i2c知识总结及协议解析_xialianggang1314的博客-程序员秘密

知识总结部分:一. 技术性能:    工作速率有100K和400K两种;    支持多机通讯;    支持多主控模块,但同一时刻只允许有一个主控;          由数据线SDA和时钟SCL构成的串行总线;    每个电路和模块都有唯一的地址;                        每个器件可以使用独立电源二. 基本工作原理:    以启动信号ST

入职阿里啦!php+mysql动态网站开发案例课堂_普通网友的博客-程序员秘密

引言技术好就一定能写出优质的代码吗?不能,对于做开发的人来说,学到的技术知识是理论性的,只有把知识代入到真实的实战案例中才能快速将理论转变为技能。一直在网上看到过很多关于类似的资料,要么就是版本比较老,要么就是讲的太干,没有阅读下去的兴趣,以至于在这方面的学习止步不前。今天,我跟大家要分享的这份阿里《互联网实战案例》共有22大实战案例,每一章节都有对应的完整代码,同时在学习的过程中需要了解并运行代码,再也不用担心学不会了。第一个模块:数据库1.1 腾讯数据库面试问题解释ACID四大特性

ZZULIOJ--2835: 未成年人之友_wowon~的博客-程序员秘密

2835: 未成年人之友时间限制:1Sec内存限制:256 MB提交:19解决:12[状态] [讨论版] [提交] [命题人:zzuliacm]题目描述根据有关法律法规,所有网络游戏企业仅可在周五、周六、周日和法定节假日每日 20:00 至 21:00 向未成年人提供 1 小时服务,其他时间均不得以任何形式向未成年人提供网络游戏服务。小凯是网络游戏企业的员工,需要写一个防沉迷系统。小凯把任务交给了你。注:本题不考虑法定节假日。未成年指未满十八周岁。输入第 ...

python pyqt5 打开文件夹 读取文件列表_pyqt5打开并读取文件_廷益--飞鸟的博客-程序员秘密

成员变量初始化 def __init__(self, parent=None): super().__init__(parent) self.file_paths = [] # 文件列表 self.file_index = 0 # 文件索引导入文件夹 # 导入文件夹 @pyqtSlot() def on_btnImportFolder_clicked(self): cur_dir = QDir.c.

笨办法学python中的作业问题,nosetests下遇到ImportError_win_mean_young的博客-程序员秘密

在该书中的习题52,为一个web应用写测试代码,_tests文档中有下列信息from nose.tools import *from bin.app import app我的文件夹结构是\ex52                \bin\app.py                \tests\app_tests.py我在ex52中运行nosetests,提示ImportError: No mo...

在Win7中安装程序集到GAC_Justin-Liu的博客-程序员秘密

微软为提高系统安全,自Vista推出后,在Windows系统中加入了一个新的东东——UAC(User Account Control),这样一个新的技术使得许多操作都受到了约束,尤其是对系统设置、文件的修改,Win7作为一个衍生品,也受到了UAC的保护。      在.NET项目开发中,针对一些类库项目或用户控件项目,当程序开发完成后,有时需要将开发的程序集,安装部署到GAC(Global A

随便推点

Filecoin系列 - 源码分析 - CPU SHA扩展_intel sha extensions_搬砖魁首的博客-程序员秘密

看了下代码, 发现P1算法本身会检测CPU是否支持 sha extensions, 如果支持, 会采用加速算法.如果将启用了加速算法的二进制文件放到intel上测试,会输出WARN: sha-ni not available, falling back",因为不支持sha extensions.如要看cpu是否支持sha extensions, 查看less /proc/cpuinfo返回的信息内是否有 sha_ni 字样

linux性能速查-CPU使用率_anickname的博客-程序员秘密

该linux系列博客为自己速查问题而写,比较乱,仅供参考,如有问题,请参考权威书籍或文档,谢谢。我们最常用的衡量CPU性能的指标就是CPU使用率,在linux系统中,使用节拍率维护CPU时间,比如如果节拍率为100,也就是每秒触发100次时间中断,在/proc/stat中可以看到CPU自开机以来的节拍数,如:cpu 27191238 724 17538650 6555468157 13...

django 引发“内存泄漏” 的问题_django服务挂了 是否与内存有关_portlet的博客-程序员秘密

早在一年以前,自己写的一个程序部署在公司的服务器上长期运行,后来发现这台机器内存经常被这个进程占光,于是怀疑是python内存回收的问题。最近两天,这个问题又冒了出来,因为业务的发展,项目中需要的脚本程序越来越多,所以这个问题必须解决,于是花了两周的时间一直在排查,而网上也有很多文章描述python占用内存不回收的问题。终于在今天网上搜到一篇文章介绍django引起内存泄漏的问题 http

Android利用BottomNavigationView默认底部导航去掉滑动隐藏效果_android底部menu_凡梦_的博客-程序员秘密

利用Android系统自带的BottomNavigationView实现底部菜单导航时,默认是3个菜单,当导航菜单不大于3个时,效果如下图:当我们在默认生成的navigation.xml中增加菜单,菜单大于3个时效果会很诡异,只显示选中的菜单了,其它的变得很小,且不显示标题,很不适应这种效果。如下图:怎么去掉这种效果,好像谷歌本身Api没有提供直接去掉的功能,我们可

国内外常用的MD5在线解密网站_somd5_shu天的博客-程序员秘密

国内外常用的MD5在线解密网站国内Md5解密:http://t007.cn/https://cmd5.la/https://cmd5.com/https://pmd5.com/http://ttmd5.com/https://md5.navisec.it/http://md5.tellyou.top/https://www.somd5.com/http://www.chamd5.org/国外Md5解密:https://www.md5tr.com/http://md5.my-ad

推荐文章

热门文章

相关标签