01环境搭建--001--Mac环境搭建

[TOC]

安装依赖

必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods。

可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

安装 Node、Watchman

使用 HomeBrew 来安装 Node 和 Watchman。在命令行中执行下列命令安装(如安装较慢可以尝试阿里云的镜像源 https://developer.aliyun.com/mirror/homebrew):

brew install node
brew install watchman

如果你已经安装了 Node,请检查其版本是否在 v12 以上。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

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

# 如果之后需要切换回官方源可使用
npx nrm use npm

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

安装 Yarn

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

npm install -g yarn

安装 Xcode

React Native 目前需要Xcode 10 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

  • Xcode 的命令行工具
  • git
  • CocoaPods

安装 CocoaPods

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

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

sudo gem install cocoapods

指定安装路径

sudo gem install -n /usr/local/bin/ cocoapods

或者可以使用 brew 来安装

brew install cocoapods

命令执行结束之后再输入pod setup,安装pod

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

要了解更多信息,可以访问CocoaPods 的官网。


上面的是RN中文网上介绍的内容,如果使用上面的安装失败,则可以参考下面的内容

1、查看当前Ruby版本

ruby -v

2、升级Ruby环境,首先需要安装rvm(第一步要下载一些东西等两分钟左右)

curl -L get.rvm.io | bash -s stable 

source ~/.bashrc

source ~/.bash_profile

3、查看rvm版本

rvm -v 

显示如下(或者是其他版本)

rvm 1.29.3 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]

4、列出ruby可安装的版本信息

rvm list known

5、安装一个ruby版本

rvm install 2.7.0

6、设置为默认版本

rvm use 2.7.0 --default

7、更换源

sudo gem update --system

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

gem sources --add https://gems.ruby-china.com/

8、为了验证你的Ruby镜像是并且仅是ruby-china,执行以下命令查看
gem sources -l

如果是以下结果说明正确,如果有其他的请自行百度解决

*** CURRENT SOURCES ***

https://gems.ruby-china.com/

9、这时候才正式开始安装CocoaPods

sudo gem install -n /usr/local/bin cocoapods

10、如果安装了多个Xcode使用下面的命令选择(一般需要选择最近的Xcode版本)

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

11、安装本地库

pod setup

12、执行以上命令后

Setting up CocoaPods master repo
  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git master --progress
  Cloning into 'master'...
  remote: Counting objects: 1879515, done.        
  remote: Compressing objects: 100% (321/321), done.        
  Receiving objects:  21% (404525/1879515), 73.70 MiB | 22.00 KiB/

最新版的MacOS Catalina系统命令行执行pod setup命令直接结束啦;
莫着急,我们手动安装本地库,速度绝对快
命令行执行以下操作

git clone https://github.com/CocoaPods/Specs.git ~/.cocoapods/repos/trunk
注意:
注意:
注意:
重要的事情要重申:

使用这个命令执行等待一段时间之后大有可能会失败,
原因基本是网络问题,
请不要着急,
根据自己和小伙伴的多次测试,
只有在使用移动手机网络或者在凌晨的时候网速才会理想
(大概几分钟就OK,其他情况下即使你的网络带宽很好也没用)

如果你晚上熬不住,早上起不来,手机流量又没了,那就往下看吧!哎。。。。。。。

或者使用下面的,国内镜像,速度刚刚的

git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git  ~/.cocoapods/repos/trunk

目录结构见下图,如果不是就自己手动移动一下

image.png

如果还不行

// 安装最新版cocoapods
sudo gem install cocoapods --pre
// 移除本地master
sudo rm -fr ~/.cocoapods/repos/master
// 移除本地缓存
sudo rm -fr ~/Library/Caches/CocoaPods/
// 重新setup,如果很慢可使用问题1的解决方法(git clone)
pod setup --verbose
// 移除trunk
pod repo remove trunk

以下一段忽略,直接看 第13步:

要查看文件下载进度的可以另外打开一个终端窗口(快捷键:选中终端按下Command+N组合键),输入以下两行命令回车执行

cd ~/.cocoapods

du -sh *

执行du -sh *之后会显示已下载的文件大小,可以多次执行来监看下载进度,如果之前还有文件大小,后来变成0了,可能是网络问题,下载已经中断了,需要结束命令并从新执行 pod setup

13、下载安装完成之后可执行下列命令检查是否可用(第一次使用可能要等一会)

pod search AFNetworking

14、CocoaPods的具体使用

新建一个Xcode工程,使用终端cd到工程目录下

创建Podfile文件:

pod init

之后就可以在项目目录里看到一个Podfile文件

打开Podfile文件:

open Podfile

添加:

pod 'AFNetworking'

保存后退出

开始下载:

pod install

创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用(注意 init 命令默认会创建最新的版本):

  • 必须要看的注意事项一

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

  • 必须要看的注意事项二

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

  • 必须要看的注意事项三

    • 请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。

    • 请不要使用与核心模块同名的项目名(如 react, react-native 等)。

    • 请不要在目录、文件名中使用中文、空格等特殊符号。

npx react-native init AwesomeProject

【提示】:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

编译并运行 React Native 应用

【提示】路径中不要有中文!!!

在你的项目目录中运行yarn ios或者yarn react-native run-ios

cd AwesomeProject
yarn iOS
# 或者
yarn react-native run-ios

提示:如果此命令无法正常运行,请使用 Xcode 运行来查看具体错误(run-ios 的报错没有任何具体信息)。注意 0.60 版本之后的主项目文件是.xcworkspace,不是.xcodeproj!

很快就应该能看到 iOS 模拟器自动启动并运行你的项目。

image.png

yarn react-native run-ios只是运行应用的方式之一。你也可以在 Xcode 中直接运行应用。注意 0.60 版本之后的主项目文件是.xcworkspace,不是.xcodeproj

如果你无法正常运行,先回头仔细对照文档检查,然后可以看看讨论区

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

使用你喜欢的编辑器打开App.js并随便改上几行。

  • 在 iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改!(如果没有反应,请检查模拟器的
  • Hardware 菜单中,connect hardware keyboard 选项是否选中开启)

环境搭建问题记录

Error: Failed to download resource "icu4c"

安装 [ 'react-native@latest' ] 失败,错误代码:243

全局安装 create-react-app

npm install -g create-react-app 

Failed to connect to raw.githubusercontent.com port 443: Connection refused error:

在host中加入以下

199.232.28.133 raw.githubusercontent.com
image.png

升级Node

  1. 查看本机当前Node和npm版本

    node -v
    npm -v
    
  2. 清除node的cache

    sudo npm cache clean -f
    
  3. 安装"n"版本管理工具,管理node(没有错,就是n)

    sudo npm install -g n 
    
  4. 更新node版本

    sudo n stable 
    
  5. 更新npm版本

    sudo npm install npm@latest -g 
    
  6. 再查一遍本机当前Node和npm的版本吧

    node -v 
    npm -v 
    
image.png

[pod install]: Error installing DoubleConversion

  • [!] Error installing Flipper-RSocket (1.1.0)

报错原因

在RN工程中,当我们使用cocoapods来安装一些RN必须的第三方编译库(比如Folly、boost),由于这些编译库是在国外,并且无论翻墙与否,很多时候直接使用cocoapods来自动下载安装基本都会失败,最近尝试在原来的RN工程和新建的RN工程上面都做了尝试,结果尝试了3天,基本都是失败的,报错的原因都是一样,这样的话,项目根本没法运行。因此,在这种自动安装经常失败甚至一直失败的情况下,了解手动下载安装就必不可少了。

➜  ios pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing DoubleConversion (1.1.6)

[!] Error installing DoubleConversion
[!] /usr/local/bin/git clone https://github.com/google/double-conversion.git /var/folders/mn/7jdnkyy91_n0bxkrgjgjk17c0000gn/T/d20191212-36568-33nxni --template= --single-branch --depth 1 --branch v1.1.6

Cloning into '/var/folders/mn/7jdnkyy91_n0bxkrgjgjk17c0000gn/T/d20191212-36568-33nxni'...
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: unpack-objects failed

RPC(Remote Procedure Call)连接失败,基本可以判定是由于网络原因,这种可能性很多,代理、局域网等等,尤其是针对国外的一些资源,对于国内的开发者来说,很不友好。

解决问题

  • 找到这些三方库
image.png
  • 手动去GitHub下载release > tar.gz
  • 将压缩包放到 ~/Library/Caches/com.facebook.ReactNativeBuild 目录下,如果文件夹不存在,手动创建即可

因为网速问题,下载其他库的时候也有可能会失败,失败了就再来一次就好,多pod install几次,总能成功的。

几次都不成功的话,还是按照上面的办法来处理


参考链接:
React Native 中文网-搭建开发环境

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容