React-Native_01:开山篇
来源:互联网 发布:黄伯云学术造假 知乎 编辑:程序博客网 时间:2024/06/06 05:53
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/
目前跨平台移动开发主要分一下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
0 0
- React-Native_01:开山篇
- React-Native_01:开山篇
- react-native开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 开山篇
- 博客开山篇
- Elastix开山篇
- ThinkPHP开山篇--0
- PHP开山篇
- div+css 开山篇
- GPU编程--开山篇
- retrofit2+RxJava简单使用
- python+selenium识别验证码并登录
- Mysql字符串截取函数SUBSTRING的用法说明
- [Azure] Possible reasons for publish failed
- mysql中limit慎用
- React-Native_01:开山篇
- JS作用域函数闭包
- ListView过滤搜索功能源码分析
- getPath(),getAbsolutePath(),getCanonicalPath()区别
- iOS开发UI篇—Quartz2D简单使用(二)
- java基础学习——java程序的运行机制详细分析
- LIGHT OJ-1305 - Area of a Parallelogram 【向量叉积】
- java转android阶段的牢骚
- 移动App开发人员应该关注的7件事