webstorm打包rn项目_使用createreactnativeapp搭建RN开发环境

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

PS&＃xff1a;我本地有两个项目文件&＃xff0c;first_rn_project是基于react-native-cli创建的&＃xff0c;rn-pro是基于create-react-native-app创建的。

• 首先我们对比最终的目录结构&＃xff1a;

first_rn_project目录下边会生成一个ios和一个android目录&＃xff0c;而create-react-native-app目录更加简单&＃xff0c;我们对比一下&＃xff0c;可以使用tree命令&＃xff08;需要安装&＃xff09;展示目录结构&＃xff0c;命令如下&＃xff1a;

first_rn_project

rn-pro

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

react-native-cli命令

create-react-native-app命令

依赖

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

打包

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

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

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

• 依赖

手机端&＃xff1a;

安装Expo app

电脑端&＃xff1a;

Nodejs&＃xff1a;安装我们就不在这里重复了&＃xff0c;自行搞定

Expo CLI&＃xff1a;

• 安装

初始化一个项目

运行命令后终端效果如图

根据提示进行下一步操作

• 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&＃xff0c;界面截图

我们关掉Expo的提示&＃xff0c;直接进入项目&＃xff1a;

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

开发环境搭建完毕&＃xff0c;剩下的就是熟悉语法和api进入开发咯&＃xff5e;