Expo 搭建 React-native 项目，妈妈再也不用担心我的环境配置

react-native 相信大部分前端开发都不会陌生——使用 JavaScript 和 React 编写原生移动应用。用 js 就能分 ios 和 android 的一杯羹。(哈哈，开个玩笑:)。玩笑归玩笑，但它能说明在开发移动应用领域，RN 有它的一席之地。

面临的问题

掌握 RN 无意能给自己增添更多筹码。但学习 RN 并有没想象中的那样顺畅。我觉得， 最大的困扰就是环境配置。react-native 中文网 教程需要根据 开发平台 和 目标平台 来安装依赖，十分的繁琐，通常没有几个小时是配置不好的，估计很多人都会卡在这里。

而且，对 iOS 程序员来说，可能不懂 Android 编译环境；对 Android 程序员来说，可能不懂 Xcode；对于前端开发人员或者其他开发人员，可能更恼火，两个都不会。

那有什么办法可以降低配置环境的复杂度呢？有 Expo，不需要配置 iOS Android 编译环境。

关于 expo ，中文网上有一个注意事项：

沙盒环境大量依赖于国外网络环境，也不能直接发布应用，只是用于学习、演示、试验等目的。不建议国内用户使用。

感觉上面那个是说 expo snack，反正，知道有这么个情况存在就可以了。而且，expo 有关于 纯 react-native 项目 转 expo 项目，或者 从 expo 项目中弹出 react-native 项目的完整教程方案，所以，开整吧。

Expo 搭建 RN 项目

Expo 搭建项目有两种方式：一种是通过 Expo 的脚手架 expo-cli；一种是通过 create-react-native-app。本文采用第一种。

1、安装 expo-cli

npm install expo-cli --global

2、创建项目

expo init my-new-project

会有两类模板让你选择：托管工作流，裸露工作流（感觉叫原生工作流更好理解点。详情见Workflows）

expo init simple-project
? Choose a template:
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

3、启动项目

cd my-new-project
expo start

4、预览项目

项目启动后，有两种方式预览：下载 Expo Client 手机客户端(手机应用商店搜索 expo )，扫描二维码；或者 在终端输入 a 或 i，启动 Android 或 iOS 模拟器。

目录结构

不同模板的目录结构和截图如下：

模板	目录结构	截图
blank	. ├── .expo/ ├── .expo-shared/ ├── .git/ ├── .gitignore ├── App.js ├── app.json ├── assets/ ├── babel.config.js ├── node_modules/ ├── package.json └── yarn.lock
tabs	. ├── .expo/ ├── .expo-shared/ ├── .git/ ├── .gitignore ├── App.js ├── __tests__/ ├── app.json ├── assets/ ├── babel.config.js ├── components/ ├── constants/ ├── navigation/ ├── node_modules/ ├── package.json ├── screens/ └── yarn.lock
minimal	. ├── .babelrc ├── .buckconfig ├── .git/ ├── .gitattributes ├── .gitignore ├── App.js ├── __tests__/ ├── android/ ├── app.json ├── babel.config.js ├── index.js ├── ios/ ├── node_modules/ ├── package.json └── yarn.lock

小联系

这里，简单看下 minimal 模板的项目目录 和 react-native init xxx 项目目录有啥不一样。

模板 minimal	react-native init xxx
. ├── .babelrc ├── .buckconfig ├── .git/ ├── .gitattributes ├── .gitignore ├── App.js ├── __tests__/ ├── android/ ├── app.json ├── babel.config.js ├── index.js ├── ios/ ├── node_modules/ ├── package.json └── yarn.lock	. ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── __tests__/ ├── android/ ├── app.json ├── babel.config.js ├── index.js ├── ios/ ├── metro.config.js ├── node_modules/ ├── package.json └── yarn.lock

感觉，主要区别在于 app.json 的配置不同，以及 构建方式的不同（一个 expo 一个 metro）

react-native

{
  "name": "nativeDemo",
  "displayName": "nativeDemo"
}

minimal 多了个 expo 字段，详情见 Configuration with app.json

{
  "name": "minimalProject",
  "displayName": "minimalProject",
  "expo": {
    "name": "minimalProject",
    "slug": "minimalProject",
    "privacy": "unlisted",
    "sdkVersion": "36.0.0",
    "version": "1.0.0",
    "entryPoint": "node\_modules/expo/AppEntry.js",
    "platforms": [
      "ios",
      "android",
      "web"
    ]
  }
}

这为 react-native init xxx 和 expo init xxx 相互转换提供了参考：

在 app.json 中添加 expo 字段，根目录要有 App.js。