React Native 入门教程

React Native 入门教程

1 简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

2 准备工作

安装ReactNative的环境需要以下配置

    1 安装Node.js 
    2 下载android sdk,并配置环境变量
    3 1个安卓模拟器，本例选择的是Genymotion

3 步骤

3.1 Node.js

第一步安装Node.js,安装完毕之后安装ReactNative

npm install -g react-native-cli

3.2 安装安卓SDK

SDK下载

Android Studio 太大，启动慢，所以选择了只安装安卓SDK下载链接如下:

http://tools.android-studio.org/index.php/sdk

下载免安装版的之后解压,首先要将没安装的包安装一下。这里由于墙，所以需要选择本地镜像。

东软信息学院开源镜像
地址:mirrors.neusoft.edu.cn
端口:80

打开安卓SDK.exe–> Tools–> Options –> 将地址和端口输入并勾选 Force https://…… 之后点击close 然后点击 packages –> reload 之后就可以选择需要下载的东西啦,然后根据需要选择需要的包进行下载。

环境变量配置

一定要配置环境变量，示例如下:

名称 :ANDROID_HOME
变量 :D:\AndroidSDK\android-sdk-windows 解压之后的安装根目录
名称 :Path
变量 :在 Path之后追加 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

之后在CMD中进行验证,出现命令提示即为正确，若变量未定义则为错误。

3.2 安装Genymotion

安装Genymotion是一个很棒得安卓模拟器，由于他的设计机理，需要安装Virtual Box 到时候一起安装即可。
官网网址如下，进入之后需要注册，然后选择桌面版，对于个人登陆之后可以免费使用。

https://www.genymotion.com/
安装之后打开运行。注意要使用你下载的安卓SDK。

3.3 初始化一个工程

在一个文件夹内运行如下命令:

react-native init FirstApp

React Native 会为你创建一个工程，等待之后会发现建立的工程。

编译运行

当以上的准备就绪之后，就要开始准备运行第一个例子了。
1、打开虚拟机
2、在该文件夹内运行cmd 输入下面命令 :

react-native run-android
之后工程就会运行，并且react-native会去寻找相应的虚拟机然后在上面安装程序然后你的第一个react-native工程就运行成功啦

遇到的错误

1 build 失败

下面的错误请：
1、配置安装环境变量
2、检查你的安卓SDK是否有未安装的部分根据他的提示请安装相应的组件。

2 安装Genymotion无法启动虚拟机

你在安装Genymotion之后可能无法启动虚拟机，可能是你的Oracle网络服务未安装，请您卸载重新安装一次即可。