这篇文章我们聊一聊react-native，它是一款开源的跨平台移动应用开发框架，于2015年推出，写这篇文章时版本已经更新到了0.61。它的目标是Learn once, write anywhere。

图1

说的直白点就是它是用来开发手机app的，并且前端用react框架写一份代码就可以做出ios和android双端APP。听话音它应该有以下优点：

比传统的h5页面体验好；效率高、节省人力，因为native端开发通常需要两拨人（ios+android），现在只需要前端。

基于以上优点以及react-native的设计思路，现在市面出现了各种各样类似于这样的框架，比如weex、hippy等，很多大厂小厂都跟着入坑。

为什么类react-native框架会火？

类react-native框架会火的原因肯定是因为大多数公司的战略都放在了app上，而技术永远是服务于业务。那为什么公司的战略重点会是app，而不是传统的浏览器，我认为有以下几个原因？

体验好，native的体验要比h5的体验好很多；垂直度高，或者说专业，有卖东西的app，有点外卖的app，有娱乐的app等等，功能专一；实现的功能多，有很多功能native可以实现，h5却做不了；受限，你厂的页面在别人家的浏览器被访问就需要受别人的约束，不在自己的“主场”就会受人管，甚至要交“过路费”，这也是为什么很多大厂选择自己做浏览器的原因。

如果做app，上面的问题都不是问题。

安装react-native

警告⚠️：这玩意安装异常困难！

首先，最好能保证网络状况良好或者非常好，而且能够“科学”上网。本文选择搭建ios版本。搭建步骤如下：

1）安装node和yarn，这个比较简单无需多言；

2）安装watchman，brew install watchman，这个工具主要为了监听文件的修改以及刷新页面；

3）全局安装react-native-cli，也比较简单，问题不大；

4）安装xcode，问题来了。本来以为appstore安装会很容易，但是给我弹出下面的弹窗

图2

然后我就去升级系统，等我升级完成后还是这样，最后不得已就去官网下载了一个与系统匹配的xcode安装包！

5）初始化项目 react-native init MyApp

图3

我就在图3这卡住了，怎么办，网上查，然后慢慢试网上找到的方法！

一开始我发现我的系统根本没装CocoaPods，所以就装一下

~ sudo gem install cocoapods ~ pod setup

再看一下源的位置

~ gem sources -l

添加源

~ gem sources -a 

移除其他源

~ gem sources --remove 

好了，完成上面的步骤，我们再初始化一下项目。但是还是卡在在了这里，真是无语！

冷静一下，看一下react native官网，让我们试一下清华大学的镜像，

图4

完成图4中的步骤，最后一步是在工程中的podFile文件加一行代码，乍一看初始化项目中没有podFile，寻寻觅觅最后发现项目中ios目录下有一个podFile文件，将其打开，内容如下：

图5

虽然不了解CocoaPods，但是这个文件的内容看起来很像前端npm包的依赖。这时想试一下在ios目录下直接运行pod install，看看能不能成功，测试一下！

图6

看起来是成功了！

这时再初始化项目，就运行成功了！

此时无论用react-native run-ios命令还是xcode都可以成功打开模拟器！

真机调试RN（失败）

1）用数据线连上自己的手机

2）选择build app的手机

图7

点击一下build，xcode提示创建失败！试了网上说的很多方法，都不行！最后没辙，去RN的github仓库issue中寻找有没有人提出类似的问题！运气好，还真让我找到了，

图8

图9

图9中一个大神给出了答案，用xcode打开xcworkspace代替xcodeproj，但是我试了一下，还是不行！感觉和xcode的版本有关系，图中版本是11.**，我的版本是10.**，问题可能在这里，不过我没有再跟下去了！

总结

在16年上半年，我做过一次RN项目，当时用的RN的版本是0.28，三年过去了，嚯，版本都已经0.61了！RN的安装真的是相当麻烦，整整折腾了一天，还没完全解决某些问题！所以建议大家在安装的时候，一定要在非常好的网络环境下进行，至少可以排除网络问题！

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！