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 加上某应用名称或者就可以了。
- 安装Homebrew,打开终端,键入该命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.1. 使用brew -v 查看是否安装成功
ps : 如果在在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R `whoami` /usr/local
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://blog.csdn.net/tiandinilv/article/details/8953001
react-native run-android
欢迎大家一起讨论学习!