React Native 环境搭建

本文以 Android 开发环境(MacBook,已安装 JDK、SDK、Android Studio )为基础而进行 React Native 环境搭建,iOS 环境类似,可参考搭建。

1、安装 Homebrew

命令:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装过程中会提示按下 return 键,此时按回车键,输入电脑登录密码

安装完成后,输入命令:

brew -v

回车,检查 Homebrew 是否安装成功,正确安装会显示 Homebrew 版本号

2、安装 nvm

命令:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

激活 nvm,命令:

. ~/.nvm/nvm.sh

安装完成后,输入命令:

nvm --version

回车,检查nvm 是否安装成功,正确安装会显示 nvm 版本号

3、安装 node

安装 node,命令:

brew install node

为会更快速访问,设置国内镜像源,命令:

npm config set disturl https://npm.taobao.org/dist --global

安装 n,命令:

npm install -g n

备注:如果提示权限问题,使用命令: sudo npm install -g n

检查是否存在可用 node 版本(第一次安装 node,一般都没有),命令:

n ls

如果无可用的 node 版本,使用以下命令安装(安装最新 LTS 版):

sudo n lts

安装完成后,再次检查可用 node 版本,如果成功安装,将会显示该版本版本号

4、安装 watchman

命令:

brew install watchman

安装完成后,使用以下命令检查是否安装成功:

watchman -v

回车,安装成功将显示 watchman 版本号

5、安装 CocoaPods

由于 CocoaPods 基于 ruby gem,ruby gem 默认的 source 国内网络访问很不稳定,因此我们需要进行换源,如果电脑之前已安装过 CocoaPods,需要先删除,没有可以进行以下删除操作

查看 CocoaPods 安装位置,命令:

which pod

删除该目录及文件,命令(请将 CocoaPods 安装位置修改成自己的):

sudo rm -rf /usr/local/bin/pod

/usr/local/bin/pod 即你的 CocoaPods 安装位置

检查 gem 安装的文件,命令:

gem list

把所有带 cocoapods 内容都是删除,命令:

sudo gem uninstall cocoapods-core

更换 source ,如果之前未安装过 CocoaPods ,可从本步开始执行,命令:

gem update ---system

gem sources --add https://gems.ruby-china.com/ --remove RubyGems.org | your community gem host

检查更换后的 source,命令:

gem source -l

回车,若更换 source 成功,将会显示"RubyGems.org | 您的社区 Gem 托管中心"

安装 CocoaPods,命令:

sudo gem install cocoapods

根据提示,输入电脑登录密码

安装本地库

pod setup

安装完成后,使用以下命令检查是否安装成功:

pod --version

回车,安装成功将显示 CocoaPods 版本号

6、安装 Yarn和 react-native-cli

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载,react-native-cli 用于执行React Native的创建、初始化、更新项目、运行打包服务(packager)等任务命令:

npm install -g yarn react-native-cli

设置镜像源,命令:

yarn config set disturl https://npm.taobao.org/dist --global

安装完成后,使用以下命令检查是否安装成功:

yarn

回车,安装成功将显示 yarn 版本号

7、创建第一个 RN 项目

在Mac平台的命令提示符窗口进入需要存储React Native项目的文件目录,输入如下命令来创建项目:

react-native init firstProject

firstProject 即项目名称,在创建的过程中,可能会报以下异常:

info Installing required CocoaPods dependencies

(node:25938) UnhandledPromiseRejectionWarning: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.

如果出现该情况,首先删除刚生成的项目,接下来输入命令:

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

然后,再次执行创建项目的命令,即可正常生成。生成完成后,执行命令:

react-native run-android

即可正常运行第一个 RN App

参考文档:

React Native环境搭建Android端(Mac版) - 简书

react-native入门之环境搭建(一) - 简书

ReactNative遇到info Installing required CocoaPods dependencies卡死的问题_installing cocoapods dependencies_zhengrong__的博客-CSDN博客

React-Native: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template - Stack Overflow

相关推荐
流星雨在线14 小时前
react naive 网络框架源码解析
网络·react native
老猿阿浪1 天前
突破测试环境文件上传带宽瓶颈!React Native 阿里云 OSS 直传文件格式问题攻克一
react native·阿里云
小妖怪的夏天4 天前
React Native 动态切换主题
javascript·react native·react.js
zhangguo20025 天前
react native和react在跨端架构上有什么区别?
javascript·react native·react.js
阿珊和她的猫5 天前
React Native 开发环境搭建:从零开始
javascript·react native·react.js
渔舟唱晚@5 天前
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
javascript·react native·react.js
小纛5 天前
React Native 太慢:kotlin-gradle-plugin-2.0.21-gradle76.jar 下载太慢
react native·kotlin·jar
爱笑的眼睛117 天前
React Native 入门 jsx tsx 基础语法
javascript·react native·react.js
西楚曹长卿7 天前
RN 获取视频封面,获取视频第一帧
android·react native·音视频·react
流星雨在线7 天前
解决 RN Switch 组件在安卓端样式很丑的问题
react native