目录

• ios环境搭建采坑
• android环境搭建采坑
• react-native基础组件的使用
• antd-mobile-rn组件库的集成
• react-native使用字体图标库
• react-native如何做启动屏和欢迎页
• react-naviation@5.x 导航组件的使用

前言

最近由于后续工作的安排，所以对React-Native展开技术预研。按照管理所有技术预研，无非包括以下几步：

• 环境搭建
• 运行基本demo
• 研究语法
• 如何打包

所以环境搭建是第一步。按照官网的提示一步一步的完成yarn、watchman的安装是非常顺利的。可以对于cocoapods安装就比较麻烦

cocoapods的坎坷安装之旅

首先为什么要安装cocoapods呢？它是什么？ 官网也给出了解释，如下：

CocoaPods是用 Ruby 编写的包管理器。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 cocoapods。

安装cocoapods的命令是：

sudo gem install cocoapods
或者
brew install cocoapods

gem是ruby的执行脚本命令。mac电脑自带ruby，但是要看看ruby的版本，因为官方说了如下一句话：

另外目前最新版本似乎不能在 ruby2.6 版本以下安装，意味着如果你使用的 macOS 版本低于 10.15 (Catalina) 则无法直接安装。可以尝试安装较旧一些的版本。如sudo gem install cocoapods -v 1.8.4，参考 issue 链接 github.com/CocoaPods/C…

所以为不产生麻烦，我们还是需要安装最新版本的cocoapods，如果mac电脑的ruby版本低于2.6，请尝试安装到2.6以上的版本。

在使用gem命令安装前，再次注意到官网的提示：

当然安装可能也不顺利，请尝试翻墙或寻找一些国内可用的镜像源

也就是说，要想顺利的安装，要么翻墙，要么使用国内镜像

ruby gem国内镜像配置

先使用下面的命令查看现有的镜像源

gem sources l

不出意外的话应该看到如下的内容：

*** CURRENT SOURCES ***

https://rubygems.org/

上面这个结果是ruby默认的官方镜像源。镜像源是国外的，速度可想而知。 添加新的镜像源之前，先删除原有的镜像源，命令如下：

gem sources -r https://rubygems.org/

现在由 ruby-china 提供镜像服务，即我们要切换成这个gem镜像：gems.ruby-china.com/， 代码如下：

gem sources -a http://gems.ruby-china.com/

这样再使用gem命令下载内容时将使用国内镜像，自然就会快一些。

开始安装cocoapods

gem镜像源修改之后就可以使用下面命令来安装cocoapods了。

sudo gem install cocoapods

安装完记得要执行

pod setup

这两步在我执行时相对比较顺利，下面才是噩梦。

项目初始化时cocoapods卡在update或者install

由于使用了较高版本的node，所以我使用下面的命令执行初始化项目

npx react-native init demo

按照提示一切都是顺理的。比如先下载工程模板、下载node依赖都很正常。直到执行install cocoapods...时就卡了很久很久。我也存有耐心的等待了很久，直到它后来报错提示install failed，此时的工程ios文件夹中没有可执行项目文件，那是因为在初始化ios工程时cocoapods并没有将依赖安装成功。也就是说ios工程是依赖cocoapods来构建的，它构建不成功，则ios工程也不会成功构建。

而且官网也给出各种提示：

必须要看的注意事项一：0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译，请务必使用稳定的代理软件并确定其配置对命令行有效。

必须要看的注意事项二：0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的依赖安装步骤卡很久（命令行停在 Installing CocoaPods dependencies），请务必使用稳定的代理软件并确定其配置对命令行有效。

必须要看的注意事项三：请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。请不要在目录、文件名中使用中文、空格等特殊符号。

看到上述提示后，尤其是第一个和第二个都提到了使用代理软件（翻墙软件） ，难道一定要翻墙才能开发React-native吗？最主要我最初已经将gem设置成了中国镜像了呀。后来想想，不对，gem设置国内镜像是为了更高的安装cocoapods，但是现在是基于cocoapods安装依赖，那么还需要将cocoapods的安装也设置成国内镜像才行。到网上搜索了很多关于cocoapods的镜像配置，找到一个清华大学的cocoapods镜像，但是很惊喜的发现，这个里面提供的git地址我在网页上打不开的。

使用了pod install --no-repo-update

最后实在别无他方法，我在项目ios文件夹执行了pod install --no-repo-update进行安装。虽然等待时间非常久，但是最终还是安装成功了。

最后使用

yarn ios 

运行起了项目。