首页 技术 正文
技术 2022年11月23日
0 收藏 918 点赞 3,779 浏览 4733 个字

有了一些对React Native开发的简单了解,让我们从实战出发。一起来构建一个简单的京东client。

这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN上的一位分享者,再次向他表示感谢!

本文会对京东client首页的布局进行简单的分析,并对搜索框部分的开发进行介绍,其它内容在后面的文章中继续介绍。

后继文章:

React Native入门——布局实践:开发京东client首页(二)TabBar的构建

欢迎交流。

1.京东client首页布局分析

如图所看到的,京东client首页布局基本分为下面几个部分:

(1)头部:搜索栏。由京东logo、搜索输入框和扫描button组成

(2)内容部分:父级的元素中为ListView或ScrollView,可滑动,当中包含一个轮播图、一组功能button和秒杀、拍卖商品列表

(3)底部:TabBar,用于切换页面

2.创建project和相关文件、文件夹

首先,我们利用react-native init命令创建一个名为JdApp(当然也能够自己起)的React Nativeproject(详细操作请參考:http://blog.csdn.net/yuanguozhengjust/article/details/50468050),项目结构例如以下图所看到的:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center” alt=””>
依据我们刚才对京东client结构的分析。眼下能够先新建几个文件,用于拆分代码。详细方案例如以下:images文件夹:用于存放相关图片Header.js:用于构建头部搜索栏(本文主要介绍此文件里的内容)MainScreen.js:主屏幕文件。起到最外层控制作用HomePage.js:首页文件,用于构建轮播图、功能button、特价列表等

3.调研相关控件

眼下App中须要用到轮播图、Tab这两个高级控件,而React Native原生的控件仅有TabBarIOS可供iOS平台使用,不能满足我们的需求,依据在Github上搜索的结果。我们能够选用下面几个第三方控件进行开发:react-native-viewpager:可实现轮播图效果,地址:https://github.com/race604/react-native-viewpager
react-native-tab-navigator:可用于构建Tab,并能够轻松地进行页面切换,地址:https://github.com/exponentjs/react-native-tab-navigator有兴趣的读者。还能够自行构建Tab和Swiper这样的控件,做一个符合项目需求的控件并不难,但想要扩展性、通用性更强,不是一件easy的事情。

4.分析搜索栏的基本布局

头部的搜索栏。分为三个部分:logo、输入框、扫码button。

当中。logo能够使用Image控件输入框稍复杂,外层是一个圆角的View,其内部左側是一个Image。用于展示放大镜Icon,中间为一个TextInput控件用于输入,右側为一个Image,用于展示语音搜索Icon右側扫码button也比較简单。仅为一个Image那么依据FlexBox布局原则。能够按下面方式进行布局:React Native入门——布局实践:开发京东client首页(一)
这里特别说明一下。因为React Native不支持自己主动计算Image等View的大小(參见:http://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything)。所以我们不能像Android的XML那样,设置为wrap_content,必须为Image指定宽度和高度。而因为React
Native使用的是类似Android dp的像素,所以请依据设计图的尺寸自行计算,这里推荐一个站点:https://pixplicity.com/dp-px-converter/

5.代码实现

确定好了搜索栏的布局,那么我们就開始详细使用JavaScript代码进行实现。首先新建一个Header.js的文件,并引入我们须要用到的控件

'use strict';import React, {
Component
Image,
TextInput
View,
StyleSheet
} from 'react-native';

接着声明类和样式,之所以使用export,是由于要在其它类中使用(如:MainScreen)

export default class Header extends Component {}const styles = StyleSheet.create({});

然后在Header类的render()方法中编写JSX代码,在StyleSheet.create()方法中。编写类CSS的样式,例如以下:

export default class Header extends Component {
render() {
return (
<View style={styles.container}> </View>
)
}
}const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 10,
paddingTop: Platform.OS === 'ios' ?20 : 0, // 处理iOS状态栏
height: Platform.OS === 'ios' ? 68 : 48, // 处理iOS状态栏
backgroundColor: '#d74047',
alignItems: 'center'
}});

然后我们在模拟器或者真机上跑一下,看看效果

嗯,不错,貌似是我们想要的效果。接着把图片资源导入项目中去。非常easy,仅仅须要在文件夹创建文件夹,将图片复制进去。WebStorm等IDE就可以自己主动识别

依据我们之前的分析,完毕样式表的设计。例如以下:

const styles = StyleSheet.create({
container: {
flexDirection: 'row', // 水平排布
paddingLeft: 10,
paddingRight: 10,
paddingTop: Platform.OS === 'ios' ? 20 : 0, // 处理iOS状态栏
height: Platform.OS === 'ios' ? 68 : 48, // 处理iOS状态栏
backgroundColor: '#d74047',
alignItems: 'center' // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
},
logo: {
height: 24,
width: 64,
resizeMode: 'stretch' // 设置拉伸模式
},
searchBox: {
height: 30,
flexDirection: 'row',
flex: 1, // 相似于android中的layout_weight,设置为1即自己主动拉伸填充
borderRadius: 5, // 设置圆角边
backgroundColor: 'white',
alignItems: 'center',
marginLeft: 8,
marginRight: 12
},
scanIcon: {
height: 26.7,
width: 26.7,
resizeMode: 'stretch'
},
searchIcon: {
marginLeft: 6,
marginRight: 6,
width: 16.7,
height: 16.7,
resizeMode: 'stretch'
},
voiceIcon: {
marginLeft: 5,
marginRight: 8,
width: 15,
height: 20,
resizeMode: 'stretch'
},
inputText: {
flex: 1,
backgroundColor: 'transparent',
fontSize: 14
}
});

请认真注意上面代码中的凝视,标有凝视的地方。即为和普通iOS、Android开发不太一样的地方!

因为我们已经将父级的元素中的排布方向改为水平,所以我们仅仅需将须要展现的元素放入<View>的子元素就可以,例如以下代码所看到的:

export default class Header extends Component {
render() {
return (
<View style={styles.container}>
<Image source={require('./images/header/header_logo.png')} style={styles.logo}/>
<View style={styles.searchBox}>
<Image source={require('./images/header/icon_search.png')} style={styles.searchIcon}/>
<TextInput
keyboardType='web-search'
placeholder='搜索京东商品/店铺'
style={styles.inputText}/>
<Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon}/>
</View>
<Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon}/>
</View>
)
}
}

须要注意的是:1.style的使用,当使用StyleSheet创建的样式时,外层仅仅须要一层{},而直接声明须要再加一层,即直接声明了匿名变量2.Image的source能够使用网络图片或本地资源,使用本地资源时,类似require.js的包引用,而使用网络资源时,用法例如以下:source={{uri:’http://xxxxxxx’}}3.TextInput的键盘类型能够使用keyboardType进行设置。占位字符使用placeholder设置,详细请參见官方文档
这时在模拟器或真机上Reload JS一下。就能够看到我们想要的界面了:

项目源代码及资源文件:https://github.com/yuanguozheng/JdApp

本次Commit:https://github.com/yuanguozheng/JdApp/commit/b34add1224fc02d25bd7a188e2cade73c122f59c

转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50538651

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140910.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,464
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,688
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,503
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,468
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,379
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,263
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站