React Native简介和环境搭建

 

目录

 

1 React Native简介

1.1 React Native简介

1.2 原理

1.3 React Native优势

1.4 React Native劣势

2. 环境搭建

2.1 node 安装

2.2 Python2安装

2.3 安装JDK

2.4 安装React Native CLI

2.5 Android Studio安装

2.6 Android SDK

2.7 配置SDK、NDK、JDK的环境变量

3. 创建和编译项目

3.1 使用react-native创建项目

3.2 创建一个Andriod 模拟器

3.3 编译和运行react-native项目

3.4 常见错误

---

1 React Native简介

1.1 React Native简介

React Native（简称RN）是Facebook开源的跨平台移动移动应用开发框架，是在React框架在移动开发的衍生物，目前支持iOS和Android；

React Native官方网站：https://facebook.github.io/react-native/

React Native Github网址：https://github.com/facebook/react-native

1.2 原理

React Native把所有JS代码(包括依赖的framework)编译成一个js文件，RN的整个框架就是解释并运行此js脚本文件；如果是js扩展的API，可以通过bridge调用native函数；如果是UI界面，则映射到Virtual DOM虚拟机到|JS数据结构中，通过bridge传递到nat

1.3 React Native优势

1. 组件化开发，复用率高，ui开发较快

2. 同时支持android和ios的ui界面

3. 可以方便进行代码热更新

4. 使用|JavaScript开发，与微信小程序开发技术相似；

5. 可以与Native页面进行互相调用，

1.4 React Native劣势

1.版本不稳定，更新迭代太快；

 2. 支持组件不全面，

 3. js调试不方便

 4. android和ios两个版本的组件还有一些不统一，有些事iOS专属的； 

2. 环境搭建

2.1 node 安装

Node官方下载：https://nodejs.org/en/download/

npm参考：npm简介和设置缓存路径

2.2 Python2安装

官方说需要安装，但是不安装业没有影响；

Python官网：https://www.python.org/

Python 2 window下载：https://www.python.org/downloads/release/python-2714/

下载对应版本：目前支持Python2版本；

2.3 安装JDK

JDK官网：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2.4 安装React Native CLI

npm install -g react-native-cli

设置镜像源：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2.5 Android Studio安装

android Studio官网下载：https://developer.android.com/studio/

2.6 Android SDK

Android SDK选择安装Android 6.0以上版本(API 23),除了安装Android SDK Platform 23外，

还需安装：

• Google APIs
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

2.7 配置SDK、NDK、JDK的环境变量

配置SDK和JDK环境变量，不然会出现 SDK找不到或这JDK的Tools.jar找不到

具体配置参考：Android SDK环境变量配置

                        JDK环境变量配置

                        NDK环境变量配置

 

3. 创建和编译项目

3.1 使用react-native创建项目

dos命令进入项目需要放置的目录，输入react-native init 项目名称，需要等待很长时间；

创建指定版本的React-native项目；

3.2 创建一个Andriod 模拟器

创建一个Android 6.0（API 23）的模拟器，或大于API 23版本；

3.3 编译和运行react-native项目

1. dos进入 react-native创建的项目目录下：

eg: D:\ReactNative\RNApp

 

2. 运行 react-native run-android，需要等待几分钟；

3. 运行结果如下表示成功：

3.4 常见错误

参考：React Native(RN)开发遇到错误集合