React Native开发环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前言

本篇文章主要讲解React Native(简称RN)开发环境的搭建，学习这篇文章可能需要开发者要懂Android原生开发环境搭建、node环境搭建和mac基本使用。

  • 系统：mac

  • React Native：0.58

Homebrew

Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，相当于linux下的apt-get、yum神器。Homebre可以在Mac上安装一些OS X没有的UNIX工具，Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。Homebrew官网：https://brew.sh/index_zh-cn.html 。

Homebrew的安装

通过以下命令来安装Homebrew。

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

Homebrew的使用

  • 安装软件：brew install 软件名，例：brew install wget

  • 搜索软件：brew search 软件名，例：brew search wget

  • 卸载软件：brew uninstall 软件名，例：brew uninstall wget

  • 更新所有软件：brew update，通过 update 可以把包信息更新到最新，不过包更新是通过git命令，所以要先通过 brew install git 命令安装git。

  • 更新具体软件：brew upgrade 软件名 ，例：brew upgrade git

  • 显示已安装软件：brew list

  • 查看软件信息：brew info／home 软件名 ，例：brew info git

  • 查看那些已安装的程序需要更新： brew outdated

  • 显示包依赖：brew reps

安装Node、watchman

我们使用mac上软件包管理工具安装Node和watchman。

brew install node
brew install watchman

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统，前端开发人员通过使用npm来管理依赖包。node版本需要在v8.3以上，安装完node后建议科学上网加速项目的搭建过程。

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

安装React Native命令行工具

通过安装react-native-cli命令行工具来生成React Native项目。

npm install -g react-native-cli

Java开发环境

由于Android开发依赖于Java开发环境，所以需要去下载JDK。React Native目前支持Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。所以建议去官网下载1.8版本的jdk。官网地址： https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 。

Android开发环境

由于我是一名Android开发人员，所以在这里简单介绍一下Android开发环境搭建过程，可能下载的开发工具需要翻墙。

Android studio

Android studio是Android官方的开发工具，Android studio下载可以去官网(https://developer.android.com/studio/?hl=zh-cn)下载Android studio，也可以去AndroidDevTools(https://www.androiddevtools.cn/)，里面有很多不需要翻墙就可以下载的工具。如果你是一名新手，注意安装Android studio的时候，安装界面选择"custom"选项，选择安装一下模块。

  • Android SDK

  • Android SDK Platform

  • Performance (Intel ® HAXM)

  • Android Virtual Device

然后，点击Next即可安装所选择的模块。安装完成后即可看到欢迎页面。

官方教程：https://developer.android.com/studio/install?hl=zh-cn

Android SDK

Android Studio默认会安装最新版本的Android SDK。你可以在Android Studio的SDKManager中选择安装各版本的SDK。


由于目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK，所以在SDK Manager中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面 Android SDK Platform 28 组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）。

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

然后点击"Apply"来下载和安装这些组件。

配置Android SDK环境变量

React Native需要通过环境变量来了解你的Android SDK装在什么路径，从而正常进行编译。

Mac上配置环境变量时经常要创建、编辑 .bash_profile文件，所以我们需要在.bash_profile中添加Android SDK的环境变量配置。

首先，在命令行中输入命令编辑.bash_profile，vim和vi都是文本编辑器，不了解的可以去http://www.runoob.com/linux/linux-vim.html 学习一下vim或者vi的使用。

vim/vi  ~/.bash_profile

然后，点击i进行编辑，添加以下配置。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Android Studio官方下载的SDK会放在$HOME/Library/Android/sdk下，如果是自定义下载的Android SDK，则需要更改ANDROID_HOME的值。

然后使用命令来使环境变量设置立即生效。

source $HOME/.bash_profile

创建项目

首先使用之前安装的React Native命令工具来创建一个新工程。

react-native init MyApp

使用visual studio code打开，目录如下：

然后准备Android设备，在这里可以使用usb连接Android真机，也可以使用Android模拟器，像genymotion、Android Virtual Device。使用真机需要打开开发者模式，并启动usb调试。

准备好设备后，进入到项目根目录中，cd MyApp，然后输入命令行运行程序。

react-native run-android

也可以使用Android Studio直接打开工程根目录下的Android程序，运行即可。

参考：

  • React Native官方文档：https://reactnative.cn/docs/getting-started/

以上是 React Native开发环境搭建 的全部内容， 来源链接： utcz.com/z/383794.html

回到顶部