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://blog.csdn.net/zhang_z_qiang/article/details/52317266

猜你喜欢

转载自blog.csdn.net/setoge/article/details/52774879