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.网址信息

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) 进入，执行

pod install

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

npx pod-install

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

image.png

image.png