React Native开发环境搭建

本文详细介绍了如何搭建ReactNative开发环境,包括安装Node、Watchman、ReactNative命令行工具及Xcode,创建新项目,以及运行和修改项目的基本流程。

https://reactnative.cn/docs/getting-started.html

搭建开发环境

本文档贡献者:sunnylqm(100.00%)

欢迎使用 React Native!这篇文档会帮助你搭建基本的 React Native 开发环境。如果你已经搭好了环境,那么可以尝试一下编写 Hello World

  • 完整原生环境
  •  
    • 简易沙盒环境

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Create React Native App, you'll need this section.

根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。

如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOSmacOS Androidwindows Android)、windows 环境搭建文字教程、以及常见问题。注意!视频教程或者其他网络上的博客和文章可能和本文档有所出入,请以最新版本的本文档所述为准!

开发平台: macOS Windows Linux 目标平台: iOS Android

安装依赖

必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。

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

Node, Watchman

我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装:

brew install node
brew install watchman

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

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

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

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

Yarn、React Native 的命令行工具(react-native-cli)

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

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源:

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

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

Xcode

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

Xcode 的命令行工具

启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具,比如git等。

Xcode Command Line Tools

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:

!!!注意!!!:init 命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

react-native init AwesomeProject

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

如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

编译并运行 React Native 应用

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

cd AwesomeProject
react-native run-ios

提示:如果 run-ios 无法正常运行,请使用 Xcode 运行来查看具体错误(run-ios 的报错没有任何具体信息)。

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

AwesomeProject on iOS

react-native run-ios只是运行应用的方式之一。你也可以在 Xcode 或是Nuclide中直接运行应用。

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

在真机上运行

上面的命令会自动在 iOS 模拟器上运行应用,如果你想在真机上运行,则请阅读在设备上运行这篇文档。

修改项目

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

  • 使用你喜欢的编辑器打开App.js并随便改上几行。
  • 在 iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改!(如果没有反应,请检查模拟器的 Hardware 菜单中,connect hardware keyboard 选项是否选中开启)

完成了!

恭喜!你已经成功运行并修改了你的第一个 React Native 应用。

 

 

接下来?

  • 试着在开发者菜单中打开Live Reload,现在你只要一保存代码应用就会自动完整刷新。

  • 如果你想把 React Native 集成到现有的原生项目中,则请参考集成到现有原生应用

如果你想从头开始学习 React Native 开发,可以从尝试编写 Hello World开始。

### 如何配置 React Native 开发环境 #### 安装 Node.js 和 Watchman 对于 macOS 用户来说,推荐使用 Homebrew 来安装 Node.js 和 Watchman。Homebrew 是 macOS 上的一个包管理器,可以让软件的安装变得简单快捷。 ```bash brew install node brew install watchman ``` 这一步骤确保了开发环境中拥有必要的 JavaScript 运行时以及文件监听工具[^3]。 #### 安装 Yarn 包管理器 Yarn 提供了一种快速、安全的方式来管理和更新项目所需的依赖项。通过下面命令可完成安装: ```bash brew install yarn ``` 此操作简化了后续项目的初始化过程并提高了效率。 #### Java Development Kit 的安装 为了支持 Android 平台的应用构建,需要先安装 JDK(Java Development Kit)。可以从 Oracle 或者采用 OpenJDK 版本来进行部署。具体方法取决于操作系统的选择,在 Windows 或 Linux 中可以直接下载官方提供的安装包;而在 Mac OS X 则建议继续利用 Homebrew 工具链: ```bash brew tap adoptopenjdk/openjdk brew cask install adoptopenjdk8 ``` 这是为了让编译器和其他相关工具能够在本地机器上正常工作所必需的基础设置之一[^1]。 #### 设置 Android Studio 及其 SDK 下一步就是获取 Android Studio IDE 本身连同附带的各种 API Level 的 SDKs。访问官方网站下载适合当前平台版本的应用程序,并按照提示完成整个流程。特别注意的是要记得调整 HTTP/HTTPS proxy 设置以便加速资源加载速度特别是当位于中国境内网络环境下时。 - **配置 SDK 路径** 打开 Android Studio 后进入 `Preferences` -> `Appearance & Behavior` -> `System Settings` -> `Android SDK` 页面指定自定义目录作为存储位置。 - **创建 AVD (Android Virtual Device)** 使用内置向导建立至少一台虚拟设备用于测试目的。选择合适的硬件模板和目标系统映像以匹配实际需求场景下的兼容性考量。 - **设定 ANDROID_HOME 环境变量** 将上述提到过的 SDK 文件夹加入到系统的 PATH 环境变量当中去,使得命令行工具可以在任何地方被调用执行。例如在 `.bash_profile` 或者 `.zshrc` 文件里追加如下内容: ```shell export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools ``` 这些准备工作完成后就可以顺利启动模拟器实例并且运行简单的 HelloWorld 类型的小例子验证一切是否就绪了。 #### iOS 环境准备 针对苹果生态内的产品线,则需额外关注几个方面来完善整体解决方案框架: - 升级 Ruby 至最新稳定版次(尤其是 M1/M2 架构的新款 MacBook),因为 CocoaPods 依赖于该解释器引擎; - 安装 CocoaPods —— 推荐的方式有两种:一是借助 Homebrew (`brew install cocoapods`) ,二是切换国内 gem 源后再单独进行全局 gem 命令安装(`sudo gem install cocoapods --source=https://gems.ruby-china.com`); - 获取最新的 Xcode 发布版本及其配套 Command Line Tools 组件,它们共同构成了 Objective-C/Swift 编程语言的标准库集合体,同时也是打包发布应用程序不可或缺的一部分。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值