RN基础学习

今天刚到新公司，要求学习RN，就在网上搜索教程学习了下。
下面是按照步骤一步一步来操作：

一 安装环境

对于iOS来说，必须要安装的依赖环境是Node, Watchman, Xcode , Cocoapods 。
Xcode和Cocoapods安装步骤就不说了。
推荐使用Homebrew来安装 Node 和 Watchman。

按照顺序执行
brew install node
brew install watchman 

(若你安装了node , 检查版本是否在12以上)
安装完node后建议设置npm镜像（淘宝源）

#使用nrm工具切换淘宝源
npx nrm use taobao

#如果之后想换成官方源可使用
npx nrm use npm

[Watchman(https://facebook.github.io/watchman)则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）]

此处是插入知识点：npm是什么 ？

（1）概念：npm是Node Package Manager的缩写，意思是node的包管理器
（2）安装：集成在node.js中，随着Node.js 安装时一起被安装
（3）常见场景：前端框架reactNative, Vue, 后台node开发等
（4）常见命令：
npm -v : 查看版本号
npm install XXX(包名) ： 下载安装包
npm install npm -g ：更新最新的npm
npm i ： 下载依赖库（ 会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号 ）

此处讲下 Yarn

yarn 是Facebook提供的替代npm 的工具，可以加速 node 模块的下载。

npm install  -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用 yarn代替npm install命令，用 yarn add 某第三方库名代替npm install 某第三方库名

二 创建新项目

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目

第一种方法

npx react-native init AwesomeProject

(使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）)
先到一个目录下，如桌面，创建完之后，文件目录如下：

工程目录.png

Podfile里内容如下：

Podfile内容.png

采用这种方法创建的时候，运行的时候可能会在 CocoaPods 的依赖安装步骤卡很久（命令行停在 Installing CocoaPods dependencies），会提示你采用pod install 安装。在执行pod install的时候，会出现很多错误，如报443（找个网好的多执行几遍就好了）或者fatal: the remote end hung up unexpectedly（去网上找找原因设置下， 如下）

git config --global http.postBuffer 5242880000   
git config --global https.postBuffer 5242880000
git config --global http.lowSpeedLimit 0
git config --global http.lowSpeedTime 99999999
如果都不行，则再去查询下，或者找个网好的多试几遍

pod install执行成功以后，运行工程，跑起来会报错

截屏2021-03-12 上午11.08.25.png

去网上找了原因，设置了下，如下，

截屏2021-03-12 上午11.09.37.png

但是还是不行，请教了小组长，他执行了

需要到工程目录下执行下面这句
npm i   
上句成功后执行
pod install

成功后Podfile文件里就会多了RN的依赖库，工程可以正常跑起来。

但是采用这种方法创建的工程，会出现很多问题，可以采用下面二种方法创建

第二种方法：指定版本

可以使用--version参数（注意是两个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。
先cd到某个目录下，直接执行下面语句，定好工程名字和版本号，就会创建一个新的RN工程。

npx react-native init AwesomeProject --version X.XX.X

我选择的版本是 0.62.0

npx react-native init AwesomeProject --version 0.62.0

第三种方法

可以使用--template来使用一些社区提供的模板，例如带有TypeScript配置的：

npx react-native init AwesomeTSProject --template react-native-template-typescript

创建好工程之后，打开终端，到工程iOS目录下，执行 pod install, 然后在工程主目录下，执行npm i, 下载依赖库， 即可运行起来了。
执行了pod install, 还是跑不起来，看了下使用下面语句，我没试，大家可以试试
npm uninstall -g react-native-cli
npx react-native init AwesomeTSProject --template react-native-template-typescript

四 编译并运行 React Native 应用

我是采用第二种方法创建的工程，可以在Xcode中直接运行，如果没有修改过目录中的任何文件时，在终端命令行输入yarn start命令, 若有任何修改，在终端命令行输入yarn ios命令完成原生部分的编译。
模拟器显示的结果是

截屏2021-03-12 上午11.58.38.png

到此为止，一个新项目就创建好了。

参考链接为：https://www.react-native.cn/docs/environment-setup