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 NodeJS和NPM Windows nvm安装NodeJS
OS X nvm安装NodeJS教程

步骤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

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

创建React Native项目

步骤3:NodeJS
Python Jdk8

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

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

webstorm创建react native项目

步骤4:安装React native
CL
I

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

npm install -g react-native-cli
安装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。

下载android_studio

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

安装android_studio

步骤8:配置AVD管理器

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

配置AVD管理器

步骤9:配置AVD管理器

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

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

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

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

创建和配置AVD管理器

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

运行Android模拟器

步骤10:运行android

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

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

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

运行android项目

重新启动项目(记住react-native
run-android是运行项目的命令):

运行React Native项目

步骤11:local.properties

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

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

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

步骤12:热加载

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

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

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?