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

有了一些对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目录：用于存放相关图片