React Native踩坑集锦

发布时间:2021-06-30 06:32
最后更新:2021-06-30 06:32
所属分类:
前端 React Native

React Native是一个利用前端技术实现的移动端框架,所以在开发环境构建和应用开发过程中,常常需要同时用到前端和移动端的技术,这也就导致了React Native在使用的时候也会同时踩前端和移动端的两重坑。这里对已经踩过的坑做一个记录,方便再碰上以后能跳过去。

更换CocoaPods的镜像

在使用react-native-cli构建React Native应用的时候,会使用到用于iOS的CocoaPods框架,这个框架在不使用镜像的时候常常会导致应用的iOS部分创建失败。要解决这个问题,可以将CocoaPods的镜像改为清华Tuna镜像。

一般CocoaPods出问题最常见的提示就是:[!] CocoaPods could not find compatible versions for pod

由于新版的React Native(0.60以上版本)使用的一般都是新版的CocoaPods,所以这里不再记录对于旧版CocoaPods切换镜像的操作了。

要切换CocoaPods的镜像,需要按顺序执行以下几条命令。

1
2
3
cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

然后再回到应用项目目录中的ios目录中执行pod install --repo-update。执行结束后,再将项目中的Podfile顶部添加以下一行内容。

1
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

即可完成CocoaPods镜像的切换。

连接原生依赖库

在React Native中有一些库是带有原生代码的,这些库除了需要使用npm install完成安装以外,还需要将原生代码连接进不同平台的应用中。

连接带有原生代码的库非常简单,只需要使用react native link命令。例如平时经常会使用的react-native-safe-area-context库和react-native-vector-icons库,在安装的时候就需要使用以下命令。

1
2
3
4
5
6
7
# 安装react-native-safe-area-context
npm install react-native-safe-area-context
npx react-native link react-native-safe-area-context

# 安装react-native-vector-icons
npm install react-native-vector-icons
npx react-native link react-native-vector-icons

完成连接以后,就可以在项目中正常的使用完成安装的库了。


索引标签
前端
Javascript
Typescript
React Native