RN几种脚手架工具的使用和对比（react-native-cli、create-react-native-app、exp）

本文档将持续更新，欢迎指正

1、react-native-cli

无法使用exp服务

react-native init program-name  #初始化项目
npm start（react-native start） #在项目目录下启动 js service
react-native run-android #已连接真机或开启模拟器前提下，启动项目
react-native run-ios #已连接真机或开启模拟器前提下(仅支持mac系统)，启动项目
复制代码

2、create-react-native-app

create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建>RN App的一个开源项目,一个创建react native应用的脚手架工具(最好用，无需翻墙

初始化后项目可使用exp服务

安装使用

npm install -g create-react-native-app #全局安装
复制代码

使用create-react-native-app来创建APP

create-react-native-app program-name #初始化项目
cd program-name #进入项目目录
npm start #启动项目服务
复制代码

create-react-native-app常用命令

npm start  #启动本地开发服务器，这样一来你就可以通过Expo扫码将APP运行起来了
npm run ios   #将APP运行在iOS设备上，仅仅Mac系统支持，且需要安装Xcode
npm run android  #将APP运行在Android设备上，需要Android构建工具
npm test # 运行测试用例
复制代码

如果本地安装了yarn管理工具，会提示使用yarn命令来启动管理服务

运行项目

用Expo App扫码启动项目服务屏幕上自动生成的二维码，program-name就可以运 行在Expo App上

expo下载配置参考下一条

3、Expo

Expo是一组工具、库和服务，可以通过编写JavaScript来构建本地的ios和Android应用程序 需翻墙使用，下载资源速度慢

安装使用

PC上通过命令行安装expo服务

1、npm install exp --global #全局安装 简写： npm i -g exp
复制代码

手机上安装Expo Client App（app store上叫Expo Client） 安装包下载地址：expo官网 手机安装好后注册expo账号（必须，后续用于PC expo 服务直接通过账号将项目应用于expo app）

提示：为了确保Expo App能够正常访问到你的PC，你需要确保你的手机和PC处于同一网段内或者他们能够联通

初始化一个项目（Create your first project）

2、exp init my-new-project  #初始化项目,会要求你选择模板
复制代码

The Blank project template includes the minimum dependencies to run and an empty root component 空白项目模板包含运行的最小依赖项和空白根组件

The Tab Navigation project template includes several example screens Tab Navigation项目模板包含几个示例屏幕

报错：

Set EXPO_DEBUG=true in your env to view the stack trace. 报错如下图 解决方法：下载Expo XDE（PC客户端使用） --初始化项目需翻墙

注：使用命令行初始化项目可能会卡在下载react-native资源，可转换成XDE初始化项目，再使用命令行启动项目并推送

3、cd my-new-project #进入项目目录
复制代码

4、exp start #启动项目，推送至手机端
复制代码

启动项目后会要求你输入你在App上注册的Expo账号和密码

初始化后项目结构

主要windows下android目录结构

|- program-name             | 项目工作空间
|- android              | android 端代码  
    |- app                  | app 模块
        |- build.gradle         | app 模块 Gradle 配置文件
        |- progurad-rules.pro   | 混淆配置文件
        |- src/main             | 源代码
            |- AndroidManifest.xml  | APK 配置信息 
            |- java                 | 源代码
                |- 包名                 | java 源代码
                    |- MainActivity.java    | 界面文件, (加载ReactNative源文件入口)
                    |- MainApplication.java | 应用级上下文, (ReactNative 插件配置)
            |- res                  | APK 资源文件
    |- gradle               | Gradle 版本配置信息
    |- keystores            | APK 打包签名文件(如果正式开发需要自己定义修改签名文件)
    |- gradlew              | Gradle运行脚本, 与 react-native run-android 有关
    |- gradlew.bat          | Gradle运行脚本, 与 react-native run-android 有关
    |- gradle.properties    | Gradle 的配置文件, 正常是 AndroidHome, NDK, JDK, 环境变量的配置
    |- build.gradle         | Gradle的全局配置文件, 主要是是配置编译 Android 的 Gradle 插件,及配置 Gradle仓库
    |- settings.gradle      | Gradle模块配置
|- ios                  | iOS 端代码
|- node_modules         | 项目依赖库
|- package.json         | node配置文件, 主是要配置项目的依赖库,
|- index.android.js     | Android 项目启动入口
|- index.ios.js         | iOS 项目启动入口
复制代码

package.json文件说明

dependencies

• 项目的依赖配置
  • 依赖配置,配置信息配置方式
    • “version” 强制使用特定版本
    • “^version” 兼容版本
    • “git…” 从 git版本控制地址获取依赖版本库
    • “path/path/path” 指定本地位置下的依赖库
    • “latest” 使用最新版本
    • “>version” 会在 npm 库中找最新的版本, 并且大于此版本
    • “>=version” 会在 npm 库中找最新的版本, 并且大于等于此版本“

devDependencies

• 开发版本的依赖库

version

• js 版本标志

description

• 项目描述, 主要使用于做第三方支持库时,对库的描述信息

main

• 项目的缺省入口

engines

• 配置引擎版本信息, 如 node, npm 的版本依赖

**index.*.js 新版RN统一入口：index.js

• 正常只作为项目入口,不做其他业务代码处理

注： 1、虚拟机上很消耗电脑内存, 建议使用真机进行安装测试