React Native项目创建躲坑记

孔子曰过:好的开发环境和初始化能够使项目开发事半功倍。

与Web项目不同,React-Native项目由于其 ‘JSX和Native Code’ 齐飞的特殊性,在项目初始化方面一直很难达到尽善尽美,在新手至上和Hackability之间的平衡也莫衷一是。发展至今,目前有三种主流的项目初始化方式:CRNA(Create-React-Native-App), React-Native, Expo。本文将会探讨这三种工具的优劣对比并给出针对不同情况的推荐。项目初始化完成后博主会分享一个易于理解的项目目录结构。作为额外福利,本文也会推荐几个实用的React Native库。

Expo, CRNA还是React-Native

要回答这个问题,首先还需需要了解各个工具的优劣势。

Expo

Expo提供了功能齐全的全家桶(XDE,SDK,ExpoKit,Snack,App),从产品策略来说,其切入点是降低React Native项目的开发和配置难度,表现出来的优势在于:

  • 图形界面项目管理(创建,build,运行,发布)
  • 无需配置Xcode和Android开发环境
  • 提供健全的设备系统功能,如:相机,传感器,通讯录,本地存储等
  • 应用发布使得开发者可以很方便地将开发中的应用与他人分享
  • 可以使用Expo手机App将项目在真机上通过扫码进行本地调试
  • 完备的开发文档

坑区提醒:

  • 在国内访问受限,原因你懂的
  • 开发者无法编写Native Code和添加Native库
  • 如需进行Native代码修改和编辑,则须进行项目Detaching将项目打回原型,自此失去以上所有的优点

CRNA

> create-react-native-app MyApp

CRNA于2017年3月面世,虽然没有全家桶,只是个基于NodeJs的命令后工具,但是其大多数功能和Expo类似,因为其本身使用了大量的Expo模块😄。与Expo相比,CRNA不需要创建任何账号,即可通过命令行以最快的速度创建一个可运行的项目。CRNA具备以下优势:

  • 单命令创建项目,天下武功唯快不破
  • 无需配置XCode和Android开发环境
  • 提供设备系统功能API和Component,此处所支持的功能与Expo稍有区别,读者可自行比对
  • 可以使用Expo手机App将项目在真机上通过扫码进行本地调试

坑区提醒:

  • 开发者无法编写Native Code和添加Native库。这点相比于Expo更为严重,因为CRNA对于Native的支持相对更少,所需Native库的可能性更大
  • 如需进行Native代码修改和编辑,则须进行项目Eject,自此失去以上所有的优点
  • 不支持npm 5,如需实用则需要进行npm降级
    > sudo npm install -g npm@4
    

React-Native

> react-native init MyApp --version 0.44.3

于前两者相比最为淳朴。React-Native是命令行工具,同样可以通过一行命令即可完成项目的创建和初始化。其具有以下优势:

  • 高度Hackable,所有代码和项目结构一览无余
  • 能够直接进行Native代码编写和集成
  • 可以使用Native库并通过react-native link与iOS/Android项目集成

坑区提醒:

  • 开发期间基本只能通过模拟器进行测试,虽然可以进行打包在真机上运行,但是没有debug能力。
  • react-native init命令默认会创建最新的React Native版本项目,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致无法正常运行iOS项目。

虽然有国内也有 boost 下载资源,但是如果读者觉得很麻烦,且对最新版本没什么追求的化,不妨暂且实用 0.44.3 版本:react-native init MyApp --version 0.44.3

小结

综上看来,读者可能会比较适合:

  • Expo,如果你:
    • 常连VPN或者身在海外
    • 不想开发和管理Native项目和代码
    • 偏好形象的项目管理方式
    • 完全满足Expo SDK中的功能
    • 希望将开发中的项目快速分享给朋友/同事
    • 希望用真机进行开发测试
  • CRNA,如果你:
    • 不想开发和管理Native项目和代码
    • 不希望依赖于特定服务与社区
    • 完全满足CRNA项目中的Component与API
    • 希望用真机进行开发测试
  • React-Native,如果你:
    • 希望对于项目有完全的控制
    • 动手能力强
    • 乐于探索并实用散布野外的第三方库

项目目录结构

如果读者时常搜索React Native开发教程和攻略,就会发现教程提供者通常都会以最简单的代码结构来解释component和API的功能,却忽略了项目中代码的组织方式。萌新们常会不知所措,之所以会有这个问题,是因为React Native项目中JS文件功能各有不同,数量繁多,种类零碎,官方也没有个推荐的做法。相比之下AngularJs就做得很好,把Controller,Service,Directive,filter区分的很清晰,加上官方提供的种子项目,使开发者的目录管理思路清晰,文件功能角色分明。

所以这里推荐个适用于小型项目的结构(只包含JS文件):

.
├── index.android.js
├── index.ios.js
└── src/
    ├── App.js
    ├── Global.js
    ├── pages/
    │   ├── index.js
    │   ├── screens/
    │   │   ├── Screen1.js
    │   │   ├── Screen2.js
    │   │   └── Screen3.js
    │   └── partials/
    │       ├── common/
    │       │   └── Tabs.js
    │       ├── Screen1/
    │       ├── Screen2/
    │       └── Screen3/
    │           ├── ListItem.js
    │           └── Footer.js
    |── utils/
    │   └── HashTable.js
    └── classes/

React Native实用库推荐

如果读者选择用react-native来进行项目创建的化,势必会需要用到第三方库来丰富应用的功能。这里推荐几个实用的基础功能库:

  • react-native-navigation:强大的导航库,实用逻辑和易用性强于官方的react-navigation,有兴趣的读者可以玩一下。
  • react-native-vector-icons:提供来自Font Awesome、Ionicon、Material Icon等全面的图标,做了很好的整合与react native实现。具有丰富的component属性字段,更能将位图渲染并异步获取静态图片文件。开发必备!
  • react-native-modalbox:提供跨平台的多样花式Modal,很好的动画和触摸控制支持,具有很强的易用性和灵活性。强烈推荐。
  • react-native-material-kit:你懂得,Mertial Design来一打。
  • react-native-root-toast:来来来,把Android的Toast搬进你的React Native应用。