更快速的 React Native 快速入门

Posted 2020-09-20

版权声明：本文为Marno原创，首发公众号 aMarno ，转载必须在明确位置注明出处！

 

 

 

• 本文为 Marno 原创，转载必须保留出处！
• 公众号 aMarno，关注后回复 RN 加入交流群
• 简书专题《 React-Native 开发阵营 》，欢迎关注和投稿
• React Native 优秀开源项目大全：https://github.com/MarnoDev/react-native-open-project

一、面临问题

从某种程度上而言，目前为止 RN 只是给拥有 Mac 电脑的开发者提供了跨平台开发的能力， 因为现在还不能使用 Windows 创建 iOS 的 RN 应用。还有一个比较普遍的问题是，有一些 ios 程序员不会配置 Android 的编译环境，而一些 android 程序员又搞不懂 XCode，至于其他没接触过移动开发的人来说，就更恼火了。有些人可能本来也只是想体验一下，结果觉得配环境这么麻烦就直接放弃了。

所以为了能让更多人感受 RN 的魅力，早在几个月前 React-community 就给出了一个不错的解决方案，可以让一个完全没接触过 RN 的人，从配环境开始5分钟实现 Hello Wolrd 的编写（就是这么快）。而且在前几天刚结束的 React Conf 2017 大会上也提到了这个，通过这个方案我们可以实现：

• 不用再去配置烦人的 iOS、Android 编译环境
• 可以用 Windows 开发 iOS 版的 RN 应用。

二、解决方案

解决这个问题需要借助两个工具：1. create-react-native-app（下文简称CRNA）； 2. Expo（原名Exponent）。

第一个是电脑上用来创建 RN 应用的工具，第二个是手机上安装的应用（Android、iOS 都有）。iOS 到 AppStore 搜 Expo 进行下载， Android 到 google play 下载，或者到 APKPure 下载，具体可以百度下。Expo 同时还提供了一个 XDE 的开发工具用来做 RN 开发，体验了一下感觉不是很好用。如果感兴趣可以到官网下载体验（官网地址：https://docs.expo.io/versions/v15.0.0/index.html ）。

下面就正式开始介绍一下这两个工具的使用，使用 CRNA 创建 RN 应用只是不用安装 iOS 和 Android 的编译环境了，但是 node 还是必须的，然后通过下面的 node 命令安装 CRNA 这个工具。

$ npm install -g create-react-native-app

• 1

• 1

安装好之后就不再使用 react-native init XXX 的命令来新建应用了，直接使用下面的命令进行创建并启动。使用 CRNA 创建的项目，你在文件夹里看不到 iOS 和 Android 工程目录，它只包含了 JS 部分的代码。

$ create-react-native-app MarnoRN
$ cd my-app/
$ npm start

• 1
• 2
• 3

• 1
• 2
• 3

正常情况下，会如下图一样运行并创建好一个 RN 应用，我们通过 npm start 启动该应用后，会生成一个二维码。这样的操作方式就感觉和微信小程序有些类似了。

 

 

接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。并且只要在 Expo 中打开过一次，就会在 App 中保留一个入口。

 

 

使用 Expo 我们可以很快速的将自己的 RN 应用和别人分享，只要把二维码或者应用链接发给别人就行，不过前提是别人也同样安装了 Expo 。我们也可以把自己的 App 上传到 Expo 中，让更多的人搜索就可以使用。上传操作命令如下：

$ npm i -g exp
$ exp publish

• 1
• 2

• 1
• 2

通过 CRNA 这样的方式，不仅完全跳过了配置 Android 和 iOS 编译环境的步骤；还突破了硬件的限制，不管你的电脑是 windows 还是 mac ，也不用管你的手机是 iPhone 还是 Android，都可以进行所有平台的代码编写和真机测试 。并且在 Expo 中还可以搜索别人上传的应用（恩！感觉这套路和小程序是一样样的）。

但是如果最终你要打包 App 发布到应用市场，那还是需要有 iOS 和 Android 编译环境，要只是用来体验一下，或者用于 RN 的学习，那这种方式应该是可以解决你的问题了，可以让你更专注的进行学习 ，而不会因为觉得安装编译环境繁琐就放弃了。当然 CRNA 还有一些其他功能，大家可以自行到 github 看原文文档。如果在使用过程中有什么问题，可以直接给作者提 issue 哈