React-Native_01:开山篇

Posted 2023-02-15 楚弋川

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