本章我们先介绍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
执行上述命令后,将使用以下内容创建具有指定名称的文件夹。
步骤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然后,选择启用热加载选项。(新版默认开启)