ReactNative开发环境搭建

最新推荐文章于 2025-07-26 13:35:39 发布

原创最新推荐文章于 2025-07-26 13:35:39 发布 · 672 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React #React.js #ReactNative #环境搭建 #Android

前端技术专栏收录该内容

9 篇文章

订阅专栏

最近需要开发dApp前端，开始学习ReactNative。

首先捋清爽3个概念：React，React.js，ReactNative。

React是一套基础框架设计，而React.js和ReactNative则是该框架的两个实现版本（不过，由于历史原因，React框架的基本概念和设计思想大多包含在React.js的相关文档中）。其中React.js面向Web应用开发，而ReactNative则面向移动应用开发。从表面看，它俩的主要区别是要把React.js中的Web组件（比如div/span）替换成Native 组件（比如View/Text）。从实现层次来看，React.js是通过计算虚拟DOM和实际DOM之间的diff，实现高效渲染，而ReactNative则是通过桥接Javascript和Native层API（Java/ObjectC），实现了业务逻辑和UI渲染的分离，从而获得原生app的性能体验。下图解释了ReactNative界面事件响应的实际流程：
在这里插入图片描述
万事开头难，这篇首先介绍下ReactNative环境的搭建。

1.安装ReactNative依赖

首先需要安装node.js，另外为了加速node模块下载建议配置npm淘宝镜像：

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

然后安装watchman，是一个用来监视文件内容变化的工具（方便实时刷新界面）：

brew install watchman

最后安装yarn和react-native-cli，前者是Facebook开发的用来替代npm的包管理工具，后者则是ReactNative的命令行工具，用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

2.配置Android SDK路径

运行项目时需要用到adb和emulator，因此需要把它们包含在PATH中（注意：不要使用tools目录中的emulator）。

以mac为例，在~/.bash_profile中加上下面这两句：

export ANDROID_HOME="/Users/macbook/Library/Android/sdk"
export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"

然后执行source ~/.bash_profile使新配置生效。

3.创建新项目

给你的新项目取个名字，比如Artemis：

react-native init Artemis

4.启动Android模拟器

首先要创建一个虚拟设备（AVD），最简单的方式是在AndroidStudio中通过Tools -> Android -> AVD manager启动管理器界面，然后创建新设备。比如我创建了一个Nexus 5X的AVD，取名为nexus5X，然后通过命令行启动模拟器：

emulator @nexus5X

5.运行项目

通过下面的命令运行刚刚创建的新项目：

react-native run-android

在这里插入图片描述
P.S. 如果希望修改代码后实时刷新界面，按下command + M，选择“Enable Hot Reloading”。

6.用VSCode调试运行

可以用Visual Studio Code调试运行ReactNative程序。

首先在“扩展面板”中安装ReactNative Tools插件：
在这里插入图片描述
然后用VSCode打开刚刚创建的项目的文件夹，进入“调试面板”，点击绿箭头旁边的下拉框，选择“添加配置”，就会自动在launch.json中增加4项配置：

这步完成以后，就可以愉快地打断点调试app了～

参考：

http://www.ituring.com.cn/book/tupubarticle/17983

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

更多文章欢迎关注“鑫鑫点灯”专栏：https://blog.youkuaiyun.com/turkeycock
或关注飞久微信公众号：
在这里插入图片描述