#yyds干货盘点#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。