React Native 学习笔记之环境搭建-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个基于 React 的移动应用开发框架，可以让开发者使用 JavaScript 和 React 的语法来构建 iOS 和 Android 的原生应用。相比于传统的原生开发方式，React Native 具有快速迭代、跨平台等优势，因此在移动应用开发领域越来越受欢迎。本文将介绍如何搭建 React Native 的开发环境。

环境要求

在开始搭建 React Native 的开发环境之前，我们需要先了解一下需要满足哪些环境要求。以下是 React Native 官方文档中的环境要求：

Node.js（建议版本 12.x）
npm（建议版本 6.x 或更高）
JDK（建议版本 8）
Android Studio（建议版本 4.0 或更高）
Xcode（建议版本 11.0 或更高）

需要注意的是，React Native 只支持 macOS 和 Linux 两种操作系统。如果你使用的是 Windows 系统，可以考虑使用 WSL 或者虚拟机来搭建开发环境。

安装 Node.js 和 npm

首先，我们需要安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让 JavaScript 在服务器端运行。npm 是 Node.js 的包管理器，可以方便地安装、升级和删除 Node.js 模块。

在 macOS 系统上，可以使用 Homebrew 来安装 Node.js 和 npm：

brew install node

在 Linux 系统上，可以使用 apt-get 或者 yum 来安装 Node.js 和 npm：

sudo apt-get install nodejs
sudo apt-get install npm

安装完成后，可以使用以下命令来验证 Node.js 和 npm 是否安装成功：

node -v
npm -v

安装 JDK

JDK 是 Java 开发工具包的缩写，是 Java 开发的基础。在 React Native 中，需要使用 JDK 来编译 Java 代码。可以从 Oracle 官网下载 JDK，也可以使用其他开源的 JDK，比如 OpenJDK。

在 macOS 系统上，可以使用 Homebrew 来安装 JDK：

brew install openjdk@8

在 Linux 系统上，可以使用 apt-get 或者 yum 来安装 JDK：

sudo apt-get install openjdk-8-jdk

安装完成后，可以使用以下命令来验证 JDK 是否安装成功：

java -version

安装 Android Studio

Android Studio 是官方的 Android 开发工具，可以用来开发 Android 应用。在 React Native 中，需要使用 Android Studio 来管理 Android SDK 和 AVD（Android 虚拟设备）。

可以从官网下载 Android Studio 并安装。安装完成后，需要打开 Android Studio 并安装以下组件：

Android SDK
Android SDK Platform
Android Virtual Device

可以使用 Android Studio 的 SDK Manager 来安装这些组件。

安装完成后，需要设置以下环境变量：

ANDROID_HOME：Android SDK 的安装目录
PATH：将 Android SDK 的工具目录和平台工具目录添加到 PATH 环境变量中

可以将以下代码添加到 .bash_profile 或者 .zshrc 文件中：

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

安装 Xcode

Xcode 是官方的 iOS 开发工具，可以用来开发 iOS 应用。在 React Native 中，需要使用 Xcode 来编译和运行 iOS 应用。

可以从 App Store 中下载并安装 Xcode。安装完成后，需要打开 Xcode 并安装以下组件：

Command Line Tools

可以使用 Xcode 的 Preferences -> Locations -> Command Line Tools 来安装 Command Line Tools。

创建 React Native 项目

完成了环境搭建之后，就可以开始创建 React Native 项目了。可以使用 React Native CLI 来创建项目，也可以使用 Expo CLI 来创建项目。这里我们以 React Native CLI 为例。

首先，需要全局安装 React Native CLI：

npm install -g react-native-cli

然后，可以使用以下命令来创建项目：

react-native init MyProject

其中，MyProject 是项目的名称。创建完成后，可以使用以下命令来启动项目：

cd MyProject
react-native run-android
react-native run-ios

其中，run-android 和 run-ios 分别用来启动 Android 和 iOS 应用。需要注意的是，启动 iOS 应用需要在 macOS 系统上进行，而启动 Android 应用则可以在 macOS 或者 Linux 系统上进行。

至此，React Native 的开发环境已经搭建完成。接下来，就可以开始使用 React Native 来开发跨平台的移动应用了。

示例代码

以下是一个简单的 React Native 组件，用来显示一个文本和一个按钮。点击按钮会弹出一个提示框。

// www.javascriptcn.com code example
import React from 'react';
import { View, Text, Button, Alert } from 'react-native';

const MyComponent = () => {
  const handlePress = () => {
    Alert.alert('Hello, React Native!');
  };

  return (
    <View>
      <Text>Hello, World!</Text>
      <Button title="Click Me" onPress={handlePress} />
    </View>
  );
};

export default MyComponent;

在 App.js 中可以使用该组件：

// www.javascriptcn.com code example
import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyComponent />
  );
};

export default App;

启动应用后，即可看到一个文本和一个按钮。点击按钮会弹出一个提示框。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2a95fa941bf7134521040

React Native 学习笔记之环境搭建