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

相关推荐
2301_796512527 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Swipe 轮播(用于循环播放一组图片或内容)
javascript·react native·react.js·ecmascript·harmonyos
熊猫钓鱼>_>7 小时前
【开源鸿蒙跨平台开发先锋训练营】React Native 工程化实践:Hooks 封装与跨端 API 归一化
react native·react.js·华为·开源·harmonyos·鸿蒙·openharmony
星空22238 小时前
【HarmonyOS】day28:React Native 实战:精准控制 Popover 弹出位置
react native·华为·harmonyos
2301_796512528 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Sticky 粘性布局(始终会固定在屏幕顶部)
javascript·react native·react.js·ecmascript·harmonyos
星空222311 小时前
HarmonyOS React Native实战:Popover弹出框组件开发指南
react native·华为·harmonyos
2301_7965125213 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Grid 宫格(展示内容或进行页面导航)
javascript·react native·react.js·ecmascript·harmonyos
无巧不成书021814 小时前
React Native 深度解析:跨平台移动开发框架
javascript·react native·react.js·华为·开源·harmonyos
2301_7965125215 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:订单步骤条实践
javascript·react native·react.js·ecmascript·harmonyos
熊猫钓鱼>_>15 小时前
【开源鸿蒙跨平台开发先锋训练营】Day 21:深度探索智能图片处理与极致性能优化
react native·华为·性能优化·开源·交互·harmonyos·鸿蒙应用
无巧不成书021815 小时前
React Native 鸿蒙开发(RNOH)深度适配
前端·javascript·react native·react.js·前端框架·harmonyos