基本概念(
问渠那得清如许，为有源头活水来。双手奉上RN官网)
react
|—react.js(web端js框架,react概念由此产生)
|—reactNative(react衍生)
环境配置
iOS仅支持Mac,Android支持Mac & Windows & Linux职业开发建议选购MBP(Macbook Pro, 建议在第一年质保快结束时购买care+,否则维修成本较高)
iOS + Mac
- 依赖于Xcode,node.js, ReactNative commandLine, watchman
* 安装Xcode
* 安装Homebrew(macOS包管理工具) : `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
* 安装node: brew install node
* 安装watchman: brew install watchman
* 安装RN命令行(cli指command line interface) : sudo npm install -g react-native-cli
- 示例项目:
* 进入要创建项目的目录: cd [parentDir]
* 创建项目,这个过程会下载一系列依赖文件,耗时较长(20min+,因为防火长城的问题,唉😔): react-native init [projectName]
曲线解决方案,用淘宝的镜像.
编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org
* 进入项目文件中: cd [projectName]
* 运行项目: react-native run-ios
- 编辑项目:
* 在index.ios.js中编辑
* 选中模拟器时cmd+R重载应用(如果无效,需要在hardware->keyboard中勾选Connect Hardware Keyboard)
* 选中模拟器时cmd+D显示开发菜单
开发菜单中的项目说明
Reload: 重新加载
Debug JS Remotely : 在浏览器里调试代码
Disable Live Reload : 是否在文件修改完成时自动重载
Start Systrace: 监控应用在一段时间内的指标信息
Enable Hot Reloading : 热更新.保留应用原有状态的情况下重载.
Show Inspector : 貌似是结合浏览器查看调试的(待确认)
Show perf(performance) Monitor: 显示性能监控
Android+Mac(已可用,尚有部分槽点未处理完)
- 依赖于Android studio,node.js, ReactNative commandLine, watchman
* Android studio自己下载安装,其他同上
* 选择custom安装
* 勾选Performance和Android Virtual Device
* 在Android Studio的启动欢迎界面中选择Configure | SDK Manager
* 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
* 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
* ANDROID_HOME环境变量配置
* 使用vim(新建)编辑`~/.bashrc`文件,加入以下内容
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
- 示例项目:
* 与ios基本相同,只是运行时使用 react-native run-android 命令,但运行前要先打开一个Android虚拟机
* 命令运行完后发现安装成功了,但没有自动运行,需要手动点击进入
* 刷新时需要使用cmd+M调出菜单手动刷新
- 编辑项目:
* 在index.android.js中编辑
iOS + Windows(不支持)
Android + Windows(待补充)
iOS + Linux(不支持)
Android + Linux(待补充)
