React Native项目搭建和使用

1.工具的下载与安装
此文章记录问mac版本的工具安装和使用，rn起初就是为苹果量身定制的，后来兼容了windows开发环境，个人感觉用mac开发前端以及rn更加快捷方便、并且顺手。
首先按照官网内容进行一步一步的安装，刚接触rn的时候，自己是小白，按照官网做也会遇到各种问题，也是到google、百度等搜索如何解决问题，下面我也会记录到中间遇到的问题,同时也会以当前最新的版本进行安装调试
干净的macOs从头安装开发软件，
1）首先安装Xcode。
直接在appstore下载即可。
2）安装Homebrew。

首先打开terminal，然后输入

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在输入此命令后，可能会报（Failed to connect to raw.githubusercontent.com port 443: Connection refused）错误，这个原因：由于某些你懂的因素，导致GitHub的raw.githubusercontent.com域名解析被污染了。
解决办法就是通过修改hosts来解决此问题。
首先查询真实IP
在https://www.ipaddress.com/查询raw.githubusercontent.com的真实IP。如下图所示：

图1.网址信息

修改hosts
添加如下内容（具体vi及修改文件命令百度谷歌自寻）：

199.232.28.133 raw.githubusercontent.com

image.png

安装如果还出现超时错误如下，那就要考虑好好学习科学上网了：
Failed to connect to raw.githubusercontent.com port 443:time out
安装过程中若报以下错误：
RPC failed; curl 18 transfer closed with outstanding read data remaining
原因是在使用git bash下载超大资源，输入以下命令：

git config --global http.postBuffer 542428800

如果没有报错，就等待安装就可以来，时间可能会稍微长，见到Installation successful!就说明安装成功，运行brew出现介绍信息即可。
3）安装node,运行以下命令

brew install node

4）安装watchman，运行以下命令

brew install watchman

5）为加速后期下载速度，使用淘宝镜像源，有科学上网工具也可以不用切换

npx nrm use taobao。

注意：在网上总能搜索到cnpm命令操作的，不要使用cnpm命令，此命令生成的目录packager无法识别。
6）安装yarn，使用它代替npm 可以加速下载，运行命令：

npm install -g yarn

7）安装CocoaPods包管理工具，运行命令：

sudo gem install cocoapods

8）创建一个新的项目工程。注意（在rn 0.60后有大的改变，使用到了cocoapods这样能更好的集成原生功能，但是0.60之前如果安装过react-native-cli，请移除掉，以减少命令互相干扰。若你的项目是0.60之前请忽略）。运行命令以下创建新项目（0.60以下用的react-native-cli命令行工具，命令为react-native init xxx）。

npx react-native init XXX

2.RN的使用 -- 添加第三方包（如果不想读废话的话，直接看代码命令即可。）
简单使用请参照官网的api介绍即可。但是值得一提的是，0.60以后的版本更好融入了原生接入入口，增加了cocoapods和npx，相信做原生开发的人都知道，是对项目的包管理器。有了这两个以后，可以更好的将现有的原生工程融入到新的React Native项目中，也可以反过来说，可以让现有的React Native项目融入到新的原生项目中。比如，现在要加入一个带原生依赖的库 react-native-webview，这是第三方的webview功能的包，那么我们只需要运行命令(1)

yarn add react-native-webview

将外部包下载到我们的工程中 (2) 进入 $\color{red}{项目根目录/ios 目录下}$ ，执行

pod install

或者直接使用npx命令,不需要进入ios目录下。

npx pod-install

0.61版本后增加来npx的使用，更方便开发者。npx是npm 5.2以后出现的命令，pod-install命令介绍如下：

image.png

这命令可以应用到任何带有cocoapods的ios项目工程中，Ionic 和 Flutter也可以。
用它的好处就像官方给出的说法：

image.png

它的好处就是在运行此命令后，它会自动去检查是否安装cocopods cli命令工具，如果没安装，它会自动按照gem 、homebrew顺序去安装，然后去检查是否在ios/目录下，执行pod install命令。具体想更了解npx，可点击查看其他小伙伴对它的解析。
这样就ok了，官网上面文档说明目前没有更改过来，不再需要像以前link操作，自动添加完毕。安卓也一样，直接yarn add 之后，自动引入包到项目中。
自此项目就全部搭建完成！