最新版React Native环境搭建(亲测)

React Native 是 Facebook 发布的用于开发跨平台移动应用的框架，它能够让开发者使用 JavaScript 进行原生应用开发。本文将介绍在最新版的 React Native 中，如何搭建开发环境。

第一步：安装 Node.js

React Native 是基于 Node.js 运行的，因此需要先安装 Node.js。可以从官方网站（https://nodejs.org/）下载并安装，或者使用包管理工具进行安装。

在 Windows 系统下安装 Node.js 时，需要注意勾选“Add to PATH”选项，以方便使用命令行进行操作。

第二步：安装 React Native CLI

React Native CLI 是用于创建和运行 React Native 应用的命令行工具。安装 React Native CLI，可以使用 npm 命令：

npm install -g react-native-cli

该命令会全局安装 React Native CLI。

第三步：安装 Android Studio

要开发 React Native 应用，需要安装 Android Studio，以便创建并运行 Android 模拟器。

Android Studio 最新版可以从官方网站（https://developer.android.com/studio）下载并安装。在安装过程中，请勾选所有默认选项。完成后打开 Android Studio ，并打开 Android SDK Manager，安装至少一个 Android SDK 版本。

第四步：创建 React Native 项目

要创建一个新的 React Native 项目，可以使用 React Native CLI 命令：

react-native init MyAwesomeApp

该命令会创建一个名为 MyAwesomeApp 的项目，并生成一个基本的项目架构。其中，MyAwesomeApp 是项目名称，可以根据自己的实际情况进行修改。

第五步：运行 React Native 项目

要在 Android 模拟器中运行 React Native 项目，可以使用以下命令：

cd MyAwesomeApp
react-native run-android

该命令会自动启动 Android 模拟器，并在模拟器中编译并运行该项目。在模拟器中，即可看到项目的演示效果。

示例一：修改项目标题

为了演示项目修改的过程，可以先修改项目的标题。在 React Native 项目中，可以使用编辑器打开 index.android.js 文件（或者 index.ios.js 文件），将以下代码：

<Text style={styles.welcome}>Welcome to React Native!</Text>

改为：

<Text style={styles.welcome}>Hello React Native!</Text>

保存并刷新模拟器，即可看到项目标题已经变为“Hello React Native!”了。

示例二：添加新的组件

除了修改项目内容外，还可以添加自己的组件并进行操作。这里以添加一个简单的按钮为例。在 index.android.js 文件中，添加以下代码：

<View style={styles.button}>
  <Button
    onPress={() => {
      Alert.alert('Button Pressed');
    }}
    title="Press Me"
    color="#841584"
  />
</View>

保存并刷新模拟器，即可看到一个名为“Press Me”的按钮出现在模拟器中。当点击该按钮时，会弹出一个弹窗，显示“Button Pressed”。

总结

本文介绍了最新版 React Native 环境搭建的完整攻略，包括安装 Node.js、安装 React Native CLI、安装 Android Studio、创建 React Native 项目以及运行 React Native 项目。同时，还提供了两个示例，演示如何修改项目标题和添加新的组件。希望能够对初学者有所帮助。