React Native简介与MAC平台下环境搭建

1.React Native是什么技术

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象[操作系统]原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。

项目目录结构：

编码方式：

export default class Student{
    constructor(name,sex,age){
        this.name = name;
        this.sex=sex;
        this.age=age;
    }
    getDescription(){
        return '姓名：'+this.name+' 性别：'+this.sex+' 年龄：'+this.age;
    }
}

上面的这么一段代码，就可以运行在iOS或者Android手机上了，是不是觉得React Native这门技术很牛逼呢。

2. 环境搭建：

如果是在Mac平台下的开发者用户，那强烈要求Homebrew，因为只要安装了Homebrew，后面再安装其他软件就一劳永逸了。只需要使用brew install 加上某应用名称或者就可以了。

1.安装Homebrew，打开终端，键入该命令

/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

2.安装Node.js
使用刚刚安装的Homebrew来安装Node.js

brew install node

3.安装完node后建议设置npm镜像以加速后面的过程，否则后面插件安装巨慢

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

4.安装watchman

brew install watchman

5.安装Flow
Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

6.React Native安装
React Native的命令行工具(react-native-cli)，用于执行创建、初始化、更新项目、运行打包服务等任务。

npm install -g react-native-cli

7.安装Yarn
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

到此，我们开发React Native的所有相关环境都配置好了，当然这里所说的环境配置完成是基于Java环境还有webStorm的开发工具已经安装完成。

好了，激动人心的时刻到了，那如何检测React Native环境是否搭建成功呢，

react-native init TestFirstRNApp

然后进入到TestFirstRNApp的根目录

cd TestFirstRNApp

最后运行该项目，第一次是比较慢的，需要加载很多文件
运行iOS环境

react-native run-ios

运行Android环境
想要将项目安装到安卓虚拟机上的话，就需要先打开Android虚拟机，如果已经安装Android Studio的童鞋，那可以使用Android Studio工具打开。
如何使用命令行打开Android虚拟机 ： http://www.52php.cn/article/p-rdxqzosp-wc.html

react-native run-android

欢迎大家一起讨论学习！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!