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

这个客户端是仿照之前版本的京东客户端开发的Android版应用，来源于CSDN上的一位分享者，再次向他表示感谢！

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

后继文章：

React Native入门——布局实践：开发京东客户端首页（二）TabBar的构建

欢迎交流！

1.京东客户端首页布局分析

如图所示，京东客户端首页布局基本分为以下几个部分：

（1）头部：搜索栏，由京东logo、搜索输入框和扫描按钮组成

（2）内容部分：父级元素为ListView或ScrollView，可滑动，其中包括一个轮播图、一组功能按钮和秒杀、拍卖商品列表

（3）底部：TabBar，用于切换页面

2.创建工程和相关文件、目录

首先，我们利用react-native init命令创建一个名为JdApp（当然也可以自己起）的React Native工程（具体操作请参考：http://blog.csdn.net/yuanguozhengjust/article/details/50468050），项目结构如下图所示：
根据我们刚才对京东客户端结构的分析，目前可以先新建几个文件，用于拆分代码，具体方案如下：
images目录：用于存放相关图片
Header.js：用于构建头部搜索栏（本文主要介绍此文件中的内容）
MainScreen.js：主屏幕文件，起到最外层控制作用
HomePage.js：首页文件，用于构建轮播图、功能按钮、特价列表等

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这种控件，做一个符合项目需求的控件并不难，但想要扩展性、通用性更强，不是一件容易的事情。

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

头部的搜索栏，分为三个部分：logo、输入框、扫码按钮。
其中，logo可以使用Image控件
输入框稍复杂，外层是一个圆角的View，其内部左侧是一个Image，用于展示放大镜Icon，中间为一个TextInput控件用于输入，右侧为一个Image，用于展示语音搜索Icon
右侧扫码按钮也比较简单，仅为一个Image
那么根据FlexBox布局原则，可以按以下方式进行布局：
这里特别说明一下，由于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的文件，并引入我们需要用到的控件
[javascript] view plaincopyprint?
  1. ’use strict’;
  2. import React, {
  3. Component
  4. Image,
  5. TextInput
  6. View,
  7. StyleSheet
  8. } from ’react-native’;
'use strict';import React, {ComponentImage,TextInputView,StyleSheet
} from 'react-native';

接着声明类和样式，之所以使用export，是因为要在其他类中使用（如：MainScreen）

[javascript] view plaincopyprint?
  1. export default class Header extends Component {
  2. }
  3. const styles = StyleSheet.create({
  4. });
export default class Header extends Component {}const styles = StyleSheet.create({});

然后在Header类的render()方法中编写JSX代码，在StyleSheet.create()方法中，编写类CSS的样式，如下：

[javascript] view plaincopyprint?
  1. export default class Header extends Component {
  2. render() {
  3. return (
  4. <View style={styles.container}>
  5. </View>
  6. )
  7. }
  8. }
  9. const styles = StyleSheet.create({
  10. container: {
  11. flexDirection: ’row’,
  12. paddingLeft: 10,
  13. paddingRight: 10,
  14. paddingTop: Platform.OS === ’ios’ ? 20 : 0,   // 处理iOS状态栏
  15. height: Platform.OS === ’ios’ ? 68 : 48,   // 处理iOS状态栏
  16. backgroundColor: ’#d74047’,
  17. alignItems: ’center’
  18. }});
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'}});

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

嗯，不错，貌似是我们想要的效果！接着把图片资源导入项目中去，很简单，只需要在目录创建文件夹，将图片复制进去，WebStorm等IDE即可自动识别

根据我们之前的分析，完成样式表的设计，如下：

[javascript] view plaincopyprint?
  1. const styles = StyleSheet.create({
  2. container: {
  3. flexDirection: ’row’,   // 水平排布
  4. paddingLeft: 10,
  5. paddingRight: 10,
  6. paddingTop: Platform.OS === ’ios’ ? 20 : 0,  // 处理iOS状态栏
  7. height: Platform.OS === ’ios’ ? 68 : 48,   // 处理iOS状态栏
  8. backgroundColor: ’#d74047’,
  9. alignItems: ’center’  // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
  10. },
  11. logo: {
  12. height: 24,
  13. width: 64,
  14. resizeMode: ’stretch’  // 设置拉伸模式
  15. },
  16. searchBox: {
  17. height: 30,
  18. flexDirection: ’row’,
  19. flex: 1,  // 类似于android中的layout_weight,设置为1即自动拉伸填充
  20. borderRadius: 5,  // 设置圆角边
  21. backgroundColor: ’white’,
  22. alignItems: ’center’,
  23. marginLeft: 8,
  24. marginRight: 12
  25. },
  26. scanIcon: {
  27. height: 26.7,
  28. width: 26.7,
  29. resizeMode: ’stretch’
  30. },
  31. searchIcon: {
  32. marginLeft: 6,
  33. marginRight: 6,
  34. width: 16.7,
  35. height: 16.7,
  36. resizeMode: ’stretch’
  37. },
  38. voiceIcon: {
  39. marginLeft: 5,
  40. marginRight: 8,
  41. width: 15,
  42. height: 20,
  43. resizeMode: ’stretch’
  44. },
  45. inputText: {
  46. flex: 1,
  47. backgroundColor: ’transparent’,
  48. fontSize: 14
  49. }
  50. });
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>的子元素即可，如下代码所示：

[javascript] view plaincopyprint?
  1. export default class Header extends Component {
  2. render() {
  3. return (
  4. <View style={styles.container}>
  5. <Image source={require(’./images/header/header_logo.png’)} style={styles.logo}/>
  6. <View style={styles.searchBox}>
  7. <Image source={require(’./images/header/icon_search.png’)} style={styles.searchIcon}/>
  8. <TextInput
  9. keyboardType=’web-search’
  10. placeholder=’搜索京东商品/店铺’
  11. style={styles.inputText}/>
  12. <Image source={require(’./images/header/icon_voice.png’)} style={styles.voiceIcon}/>
  13. </View>
  14. <Image source={require(’./images/header/icon_qr.png’)} style={styles.scanIcon}/>
  15. </View>
  16. )
  17. }
  18. }
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}/><TextInputkeyboardType='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

        </div></div>

React Native入门——布局实践：开发京东客户端首页（一相关推荐

  1. React Native for Android 实践 — 实现知乎日报客户端

    React Native for Android 的发布,对一个 Android 开发者来说还是有相当的吸引力的.通过前面这篇博客:React Native for Android 入门老虎好不容易入 ...

  2. React Native 入门实战视频教程（36 个视频）

    React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...

  3. React Native 入门实战视频教程（37 个视频）

    我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...

  4. React Native 入门实战视频教程（4 个视频）

    React Native 入门实战视频教程(4 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示在 ...

  5. 《React Native跨平台移动应用开发》PDF电子书分享

    链接: https://pan.baidu.com/s/14r6xZPJ0u1mrZejEuV8RrA 密码: pqan 分享<React Native跨平台移动应用开发>PDF电子书,本 ...

  6. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  7. React Native for Arcgis 地图开发 LocationCtrl （十五）

    定位工具封装和使用 LocationCtrl import React, {useState, useEffect} from 'react'; import {View, Text, ScrollV ...

  8. React Native for Arcgis 地图开发 聚合图Cluster （十一）

    ClusterLayerCtrl 聚合图层调用封装 import React, {useEffect, useState} from 'react'; import {ScrollView, Styl ...

  9. 2.React Native Flex布局介绍以及实践

    好久没有写博客,一直在用自己的印象笔记记录一些问题.2017年了,想重新的把博客写起来.也希望通过这个平台交一些朋友. 没有具体的介绍基本的语法,主要是说明了与标准的CSS Flex的一些区别以及一个 ...

  10. React Native入门（十四）之动画（1）Animated详解

    前言 在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...

最新文章

  1. 关于域的的一些遐想(一)
  2. 「原创」马云又嗨啦，云栖音乐节与李健同台飙歌，把健哥都带跑调了
  3. php lalaogu cn,php安装编译时错误合集
  4. 卷积神经网络的网络结构——以LeNet-5为例
  5. SQL2005对字符串进行MD5加密
  6. 公益性岗位计算机考试内容,公益性岗位公共基础知识：计算机概述-计算机硬件系统（1）...
  7. vue-:class的几种使用方式
  8. axure 小程序 lib_【kboneui】打通 H5/微信小程序，多端UI库
  9. Hello Dojo!(翻译)
  10. FileZilla Server远程管理
  11. uartz Spring与Spring Task总结
  12. SQL Server - 无法将数据库从SINGLE_USER模式切换回MULTI_USER模式（Error 5064）
  13. Google reCaptcha验证码无法显示解决方案
  14. 《金牌网管师——助理级网吧网管》目录
  15. 解决Gradle‘s dependency cache may be corrupt (this sometimes occurs after a network connection timeout
  16. 使用Windows批处理+ImageMagick 实现批量处理图片
  17. unigui unidbgrid导出Excel
  18. UVa1471 Defense Lines（LIS变形）
  19. android手机慢,揭秘Android手机变慢的三大原因与对策
  20. ShellShock（破壳漏洞）的简单分析

热门文章

  1. 谢烟客---------Linux之深入理解anaconda使用
  2. 【架构师面试-JVM原理-3】-JVM垃圾回收
  3. 【播放器】播放器/短视频 SDK 架构设计
  4. SDN跟网络虚拟化的完美结合
  5. Apache Axis2项目的联合创始人总结30条架构原则
  6. 微信小程序wx:for 循环中item的keng
  7. My summery
  8. pmp项目管理的优先级解决方法
  9. STM32对于1997与2007电表数据规约的解析
  10. adobe服务器无响应,链接不到adobe服务器