React-Native_01:开山篇

Posted 楚弋川

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Native_01:开山篇相关的知识,希望对你有一定的参考价值。

1.React-Native技术背景

目前跨平台移动开发主要分一下4个主要流派为:Web流,代码转换流,编译流,和虚拟机流。
Web 流:也被称为 Hybrid 技术,它基于 Web 相关技术来实现界面及功能
代码转换流:将某个语言转成 Objective-C、Java 或 C#,然后使用不同平台下的官方工具来开发
编译流:将某个语言编译为二进制文件,生成动态库或打包成 apk/ipa/xap 文件
虚拟机流:通过将某个语言的虚拟机移植到不同平台上来运行


facebook之前投入了大量精力在html5,虽然取得很大进展,但始终不如人意,后来就转向native开发,性能和体验都近乎完美,但无法摆脱苹果的束缚,在版本更新和维护上非常的麻烦,同时,一些公司采用混合开发模式(Hybrid)即:native+web,但是webview的性能在移动断是受限的,所以也不是一种特别好的模式。


之后,facebook在react框架基础上推出react-native(react.js用于开发网页),在性能上仅次于native,但比Hybrid和html5优越很多。


同时,RN不仅可以使用前端开发的模式开发应用,还可以调用原生应用的UI和组件


现在除了Facebook,很多大公司都在尝试这一技术来降低开发和维护成本,如:淘宝部分功能、qq空间、携程部分产品等,而且微软未来在UWP应用上也会支持RN技术。


2.搭建开发环境
2.1安装node.js,会自动安装包管理器npm,查看安装结果node -v   npm -v

2.2安装java开发环境,java sdk、java jdk,并配置java环境变量,查看环境变量echo %path%
2.2.1配置环境变量 
在系统环境中添加JAVA_HOME,在Path中添加 %JAVA_HOME%/bin


2.3安装android开发环境,并配置android环境变量
2.3.1配置环境变量 
在系统环境中添加ANDROID_HOME,在Path中添加 %ANDROID_HOME%\\tools  %ANDROID_HOME%\\platform_tools
在系统环境中添加CLASSPATH,值:.;%JAVA_HOME%\\lib\\dt.jar;%JAVA_HOME%\\lib\\tools.jar


2.3.2下载Android SDK,
Tools:Android SDK Tools、Android SDK Platform-tools、Android SDK Build tools(必须是版本23.0.1)
Android 6.0(API23):SDK Platform、Google APIs、Soucre for Android SDK(如果装虚拟机:Google APIs Intel x86 Atom_64 System Image)
Extras:Android Support Repository、Android Support Libarary(Obsolete)、Google USB Driver(如果虚拟机:Inter x86 Emulator Accelerate[HAXM install])


2.4安装代码编辑环境,我使用的是vscode,可以很方便的调试程序,也可以使用WebStorm
2.4.1安装react native tools插件,安装Bable ES6/Es7插件
2.5.2初始化GIT存储库(本地)


2.5安装代码版本工具,git,方便项目管理,和clone开源资源


3.第一个RN项目
3.1切换npm镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist


3.2安装react-native-cli 
npm install react-native-cli -g //全局安装cli


3.3初始化实例
react-native init Mytest


3.4下载开源组件
npm install //安装project.json中的资源包
npm install 包名 -save //最新版本
npm install 包名@2.1.1 -save //指定版本


3.5运行
react-native run-android
react-native run-ios


3.6其他常用命令
adb devices //查看当前连接设备
adb reverse tcp:8081 tcp:8081  //重新链接设备
adb shell input keyevent 82  //调出开发者菜单
npm cache clean  //清理npm本地缓存
npm kill-server  //结束npm
npm start-server //开启npm
react-native upgrade //更新react-native版本



4.相关资源
RN官网:     http://facebook.github.io/react-native/docs/getting-started.html
RN中文官网: http://reactnative.cn/
ES语法:     http://es6.ruanyifeng.com/
Android资源:http://www.android-studio.org/

npm淘宝镜像:http://npm.taobao.org/


所用软件:链接:http://pan.baidu.com/s/1skLr2A5 密码:oo3t


以上是关于React-Native_01:开山篇的主要内容,如果未能解决你的问题,请参考以下文章

WCF开山篇__图片传输

快速入门Linux基础+环境配置+shell脚本

Linux 性能优化 - 01开山初始篇

JavaMail开发教程01开山篇

Struts1开山篇

Linux开山篇