React Native基本概念和环境安装 – React Native实战教程

本章我们先介绍React Native的基本概念，然后介绍React Native的环境安装，下一章开始介绍React Native的实战使用。

React Native的基本概念

为了更好地理解React的本地概念，我们将从官方文档中借用几行：

React Native让你只用JavaScript来构建移动应用。它使用与React相同的设计，允许你从声明性组件组成丰富的移动UI，使用React Native，你不需要创建移动web应用、HTML5应用或混合应用。你构建了一个真正的移动应用程序，它与使用Objective-C或Java构建的应用程序没有什么区别。React Native使用与普通iOS和Android应用相同的基本UI构建块，你只需使用JavaScript和React将这些构建块放在一起。。

React Native的特性

下面是React Native的特点

• React—这是一个使用JavaScript构建web和移动应用程序的框架。
• Native——你可以使用由JavaScript控制的本地组件。
• 平台- React Native支持IOS和Android平台。

React Native的优势

下面是React Native的优点

• JavaScript – 你可以使用现有的JavaScript知识来构建本地移动应用程序。
• 代码共享——你可以在不同的平台上共享大部分代码。
• 社区——React和React Native周围的社区很大，你可以找到任何你需要的答案。

React Native的局限性

下面是React Native的局限性

Native组件——如果你想创建尚未创建的本机功能，则需要编写一些特定于平台的代码。

React Native环境安装

要配置React Native的环境，需要安装几样东西，我们将使用Windows作为我们的构建平台。

步骤1：安装create-react-native-app

在你的系统中成功安装NodeJS和NPM之后，你可以继续安装create-react-native-app(全局安装如下所示)。

> npm install -g create-react-native-app

步骤2：创建React Native项目

浏览所需的文件夹并创建一个新的react native项目，如下所示。

>cd Desktop
>create-react-native-app MyReactNative

执行上述命令后，将使用以下内容创建具有指定名称的文件夹。

步骤3：NodeJS Python Jdk8

确保在系统中安装了Python NodeJS和jdk8，如果没有，就安装它们。此外，建议安装最新版本，以避免某些问题。

注意：如果使用命令创建项目不成功，可以直接使用WebStorm创建项目（因为可能即使用了淘宝镜像地址，命令行创建也可能一直卡着不动），WebStrom直接选择创建react native项目即可，之后会自动下载依赖，下面成功创建项目：

步骤4：安装React native CLI

你可以使用如下所示的install -g react-native-cli命令在npm上安装react native命令行界面。

npm install -g react-native-cli

第五步：启动react native项目

要验证安装，请浏览项目文件夹并尝试使用start命令启动项目。

Desktop>cd MyReactNative
Desktop\MyReactNative>npm start

步骤6：退出项目

如果你想使用android studio运行android模拟器，请按ctrl+c退出当前命令行。

然后，执行run eject命令如下：

npm run eject

这将提示你弹出选项，使用箭头选择第一个选项并按回车。

然后，你应该在主屏幕上显示应用程序的名称，以及Android studio和Xcode项目的项目名称。

步骤7：安装Android Studio

访问网页https://developer.android.com/studio/并下载android studio。

下载安装文件后，双击即可进行安装。

步骤8：配置AVD管理器

要配置AVD管理器，请单击菜单栏中的相应图标。

步骤9：配置AVD管理器

选择一个设备创建，Nexus 5X是建议的。

单击Next按钮，你将看到一个系统映像窗口，选择x86 Images选项卡。

然后，选择版本并单击next。

最后，单击Finish按钮完成AVD配置。

配置好虚拟设备后，单击Actions列下的play按钮来启动android模拟器。

步骤10：运行android

打开命令提示符，浏览你的项目文件夹，然后执行react-native run-android命令。

然后，你的应用程序执行开始在另一个提示，你可以看到它的状态。

在你的android模拟器中，你可以看到默认应用程序的执行方式为。

重新启动项目（记住react-native run-android是运行项目的命令）：

步骤11：local.properties

打开项目文件夹SampleReactNative/android中的android文件夹(在本例中)，创建一个名为local的文件，属性并在其中添加以下路径（已存在可忽略）。

sdk.dir = /C:\\Users\\user\\AppData\\Local\\Android\\Sdk

在这里，用你的用户名替换user。

步骤12：热加载

为了构建应用程序，修改App.js，这些修改会在android模拟器上自动更新。

如果不是，点击android模拟器按ctrl+m然后，选择启用热加载选项。（新版默认开启）