webstorm打包rn项目_使用create-react-native-app搭建RN开发环境

上文我们已经尝试了基于react-native-cli的环境搭建，整体下来，个人觉得是遇到的最复杂的开发环境搭建，尤其是Android Studio的模拟器部分，本文我们尝试基于create-react-native-app的RN环境搭建，为了参照react-native-cli，我们尝试使用对比学习的方式。

PS：我本地有两个项目文件，first_rn_project是基于react-native-cli创建的，rn-pro是基于create-react-native-app创建的。

---

• 首先我们对比最终的目录结构：

first_rn_project目录下边会生成一个ios和一个android目录，而create-react-native-app目录更加简单，我们对比一下，可以使用tree命令（需要安装）展示目录结构，命令如下：

tree -C -L 1 //只展示一级目录并高亮显示

first_rn_project

.
├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── node_modules
├── package-lock.json
├── package.json
└── yarn.lock

rn-pro

.
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
└── package.json

• 初始化项目的方法和依赖

react-native-cli命令

react-native init yourProjectName                       //初始化
cd yourProjectName && react-native run-ios              //运行ios环境
cd yourProjectName && react-native run-android          //运行android环境 

create-react-native-app命令

create-react-native-app yourProjectName                 //初始化
cd yourProjectName && npm start                         //启动项目

依赖

react-native-cli依赖node / watchman / jdk / android sdk,android studio / xcode 等等，而create-react-native-app可以摆脱android studio 和 xcode ，只要在手机上安装expo client就可以开发, 当然你也可以在android studio 和 xcode 查看项目效果

打包

react-native-cli打包需要依懒android studio 和 xcode , 配置繁琐。

create-react-native-app只需要 配置 app.json 然后运行 exp build:android 或 exp build:ios 就可以打包了

---

看了上边的这么多对比，下边我们正式进入create-react-native-app的环境搭建

• 依赖

手机端：

安装Expo app

电脑端：

Nodejs：安装我们就不在这里重复了，自行搞定

Expo CLI：

npm install expo-cli -g //可能需要加sudo

• 安装

npm install -g create-react-native-app //可能需要加sudo

初始化一个项目

create-react-native-app rn-pro
cd rn-pro
npm start

运行命令后终端效果如图

根据提示进行下一步操作

• Scan the QR code above with the Expo app (Android) or the Camera app (iOS).

• Press a for Android emulator, or i for iOS simulator.

• Press e to send a link to your phone with email/SMS.

• Press s to sign in and enable more options.

我们敲i进入iOS simulator，界面截图

我们关掉Expo的提示，直接进入项目：

你的项目就运行在ios模拟器上了，我们可以看到这种方式非常的简单，没有复杂的配置，（当然你如果需要安卓的调试，模拟器还是要自己配置的），我们现在访问react-native的官方文档，这种方式已经变成了推荐方式，不管怎么样，两种方式都了解到，对开发绝对有好处。

开发环境搭建完毕，剩下的就是熟悉语法和api进入开发咯～