React-Native 之 项目实战（一）

前言

---

• 本文有配套视频，可以酌情观看。
• 文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。
• 文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。
• 如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。
• 转载麻烦注明出处，谢谢。

• 资料：链接: https://pan.baidu.com/s/1b3abwy 密码: k8p5

• 源码托管到 github 上，需要源码的 点我下载，喜欢的话记得 Star，谢谢！

ES5转ES6

---

• 关于ES6语法，建议大家可以看下阮老师的 ECMAScriot 6
• 快速了解的话，大家可以参考一下 es6语法快速上手

项目简介

---

• 先来看下我们仿照的这款APP的效果：

• 从上图中，我们可以看出复杂度并不大，但是时间关系我们尽量将所有的模块都做完，并完善细节。

译注：

• 建议打开 视频 配合 文字 学习，以免有某些细节文中没有提到，但以文中内容为准（根据反馈进行相应更新）

• 之所以选择这款APP，和我个人的爱好有关，当然关键还是因为这个APP整体并不复杂，包含了市面上常见APP的样式，并且很顺利地就获取到所有请求参数和图片资源，很适合我们体验 React-native 大致的开发流程。

项目分析

---

• 在开发APP前，产品经理大致会进行需求的分析，然后开会讨论开发过程中需要使用到的技术、会遇到的难点、分配相应任务、倾听开发人员意见并进行相应的修改，最终确定整体原型图、开发流程、技术、周期等等，当然其中还有UI的介入，我们没有产品经理，UI也有现成的，所以大致给大家划分以下几块：

  • 需求分析：这款APP主要是通过抓取各大电商平台的 商品优惠信息 进行筛选、分类并最终展现给用户，使用户可以方便、快捷、实时的获取高质量的优惠信息。

  • 开发模型：我们这边类似基于 原型模型 开发。

  • 使用的技术：React-Native

  • 功能模块：主要分为 首页、海淘模块、小时风云榜 三大模块等其它附属模块（酌情增加）。

  • 整体架构：

    • 主体：由 TabBar 作为主体框架，以 首页、海淘模块、小时风云榜 为整体模块，根据 原型图 的效果选择相应的跳转方式
    • 数据展示：根据 原型图 选择相应的数据展示方式

  • 命名规则：参考 编码规范文档(不同公司之间都有差异，具体看公司提供的文档，这边先遵守下面提到的规则即可)

• 测试：MDZZ，谁测试→→！

工程环境配置

---

• 所有需要用到的资源点击下载。

• 首先，来配置 iOS 端。

• 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹。
• 这时候我们可以看到所有图片资源已经成功导入到iOS工程中，接着我们点击工程文件进行一些必要的配置。
• General —— App Icons and Launch Images —— 修改 Launch Images Source 为 Images.xcassets 文件夹内的 LaunchImage ，清除 Launch Screen File 内容。
• General —— Deployment Info —— Device Orientation —— 只保留 Portrait 选项。
• 打开 info.plist 文件，找到 Bundle name 选项，将其内容修改为 逛丢学习
• 打开 info.plist 文件，找到 App Transport Security Settings 选项，给其添加 Allow Arbitrary Loads 选项并设置内容为 YES (如果使用 IPV6标准 可以忽略这一步)
• OK,至此 iOS 端配置完毕。

• 接着，来配置 Android 端。
• 将压缩包内的 drawable-xxhdpi 文件夹复制粘贴到 GD/android/app/src/main/res/ 中。

• 设置 APP图标 进入 GD/android/app/sec/ 打开 AndroidManifest 文件，修改 android:icon 项，如下：

      <applicatio>
          android:icon="@drawable/icon"
      </application>
  

• 设置 APP名称 进入 GD/android/app/src/main/res/values/ 中，打开 strings.xml 文件，做如下修改：

      <resources>
          <string name="app_name">逛丢学习</string>
      </resources>

• OK,至此 Android 配置完毕。

目录结构与命名规则

---

• 为了方便理解，我们这边先不按照常规的React-native开发结构进行开发，后续章节再慢慢转变
• 这边我们将文件分为 main(入口)、home(首页)、ht(海淘)、hourList(小时风云榜) 4大部分，将相关的文件放入对应的文件夹，避免开发中频繁切换文档给新手带来烦躁感
• 命名规则：
  
  • 文件夹命名方式我们就跟着 React-Native 默认的方式，采用 小写 + 下划线 进行命名
  • 文件命名方式我们采用 前缀(大写) + 模块名称(帕斯卡) 的方式进行命名
  • 函数、常量、变量等使用 驼峰命名规则

目录结构：

译注：

• 驼峰命名规则：首字母小写，后续单词以大写开头，详情点击