React Native 开发环境搭建

163 阅读3分钟

前言

本文是一篇React Native 环境搭建的辅助文档,主要记录自己在搭建环境过程中遇到的问题及解决办法.主要的搭建步骤还是以官方文档为准.

搭建iOS环境

在iOS环境中必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods.我们安装依赖的时候往往需要用到Homebrew.所以在安装其他依赖之前我们需要先安装Homebrew来加快环境搭建的速度.

我建议的安装顺序为 Homebrew -> n模块 -> Node -> Watchman -> RVM -> ruby -> CocoaPods.当然前面几个的安装顺序其实问题不大,但是RVM -> ruby -> CocoaPods这三个的顺序必须是这样的,否则大概率会出现问题.

Xcode可以通过App Store 并行安装.

Homebrew 安装办法

Homebrew可以通过下面这条命令直接安装,但是由于网络和墙的原因大概率安装不成功.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

所以我们可以参考这篇博客来完成安装,速度非常快.

n模块 Node Watchman

n模块是管理node版本的管理工具,电脑上可能同时存在多个node版本,n模块可以非常轻松的完成管理工作,并且安装指定版本的node.使用及安装方法这里不做赘述,百度一下就可以了.

watchman使用Homebrew来安装非常方便

brew install watchman

RVM 和 ruby

RVM是ruby的管理工具,通过rvm可以管理ruby的版本,并且可以在多版本之间切换.参考这篇博客来安装和使用RVM.

CocoaPods

CocoaPods对比其他的依赖来说是比较麻烦的,前面说到RVM -> ruby -> CocoaPods这三个的顺序必须是固定,其实是因为ruby版本和RVM管理工具对cocoapods的影响,如果你在安装RVM和ruby之前安装了CocoaPods的话,那么我建议你彻底删除之后重新安装.

删除cocoapods
// 删除老版本cocoapods
sudo gem uninstall cocoapods

//查看本地安装过的cocopods相关东西
gem list --local | grep cocoapods

//一般会显示下面这样的列表
cocoapods-core (1.9.1)
cocoapods-deintegrate (1.0.4)
cocoapods-downloader (1.3.0)
cocoapods-plugins (1.0.0)
cocoapods-search (1.0.0)
cocoapods-stats (1.1.0)
cocoapods-trunk (1.4.1)
cocoapods-try (1.1.0)

// 逐个删除
sudo gem uninstall cocoapods-core
更换镜像源
// 删除镜像
gem sources --remove https://rubygems.org/

// 修改镜像
gem sources --add https://gems.ruby-china.com/

// 查看镜像
gem sources -l

// 这样显示说明镜像更换成功
*** CURRENT SOURCES ***

https://gems.ruby-china.com/
安装cocoapods
// 安装指定版本的cocoapods
sudo gem install -n /usr/local/bin cocoapods -v 1.11.3

// 检测是否安装成功,成功的话显示 1.11.3 (因为安装的就是1.11.3的版本)
pod --version

// 更新Podspec索引文件
// 1.cd 到pods索引文件目录下
cd ~/.cocoapods/repos

// 2.删除旧文件
pod repo remove master

// 下载索引文件
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

创建并运行RN项目

这个时候根据官网创建RN项目

npx react-native init AwesomeProject

在创建的时候可能会遇到下面的问题

image.png

这是因为在创建RN项目的时候,iOS的依赖都是通过cocoapods来下载的,但是下载的路径不正确.

解决办法: 找到iOS工程下的podfile文件,并在第一行粘贴这行关键代码

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

image.png

然后cd 到 ios/ 文件的路径下,执行

pod install

这个时候安装到一半可能会出现下面这种情况

image.png

不要管,继续执行pod install直到安装完成. 这个时候就可以通过 yarn ios来运行iOS项目了.

搭建Android环境

待续......