极速配置 expo + react-native 运行环境

首先必要安装 node及 npm，其次将 npm 的全局 prefix 和 cache目录加入到环境变量，使 npm 全局安装的依赖可以直接执行，比如 yarn

此处配置 expo + react-native 其实就是利用两个脚手架，一个是 create-react-native-app 创建项目目录，另一个就是expo-cli，用于启动项目，打包项目及发布

为了更好的体验手机端，推荐使用 expo 客户端浏览，有安卓和ios版本，目前 ios 版本好像已经从 store 下架

安装 yarn 依赖管理工具

更快的依赖安装工具(其实就是在第一次安装依赖时就会缓存)，缓存目录会比较大，但还是推荐使用 yarn 下载依赖

$ npm i -g yarn
$ yarn global bin # yarn 安装位置
$ yarn global dir  # yarn 依赖的全局安装位置

# 比如：
$ yarn config set global-folder D:\env\nodejs\node_global
$ yarn config set cache-folder D:\env\nodej\node_cache

安装命令行脚手架

$ npm i -g create-react-native-app expo-cli exp

# 推荐使用 yarn 安装 
$ yarn global add create-react-native-app expo-cli exp

创建项目目录

直接可以使用 create-react-native-app 创建一个项目目录,其预设了其它的初始模块，个人感觉直接默认就好

$ npx create-react-native-app [目录名]

> 直接选择 default 

如果中途在 npm install 时过程很慢，这里推荐手动使用 yarn 安装项目依赖

运行

# npm 启动
$ npm run android
$ npm run web
$ npm run ios

# 推荐使用 yarn 直接启动
$ yarn android
$ yarn web
$ yarn ios

当然也可以直接使用 expo start --web 等命令

启动后会启动一个 dev-tools 的 web 服务器,默认端口是 19000，而这个服务器是用于监听应用程序的服务器，比如说代码中有一部分有console.log，这个服务则会打印出来

命令行成功执行后会有一个二维码，该二维码就是 expo 客户端可扫描访问的二维码,可直接在手机上运行该APP

expo 客户端还可以输入 exp://192.168.8.170:19000 当前服务器地址访问

下面附上当前项目创建 package.json 及 expo 客户端版本

package.json

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "expo": "~37.0.3",
    "expo-splash-screen": "^0.2.3",
    "expo-updates": "~0.2.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-screens": "~2.2.0",
    "react-native-unimodules": "~0.9.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

expo 客户端版本: 2.15.4

参考链接

create-react-native-app github 官网
expo cli 脚手架 github 官网
expo 官网
react-native 官网
react-native 中文网
yarn cli 命令帮助文档