好久没有写博客,一直在用自己的印象笔记记录一些问题。2017年了,想重新的把博客写起来。也希望通过这个平台交一些朋友。
环境配置
- Homebrew:mac上的包管理。可以用来安装nvm,watchman等等。
- nvm:Node Version Manager(Node.js的版本管理器),对电脑上多个不同node.js版本方便管理。
- watchman:用来监听文件的修改。Facebook推荐。
- node:目前理解是一项服务器技术,还有主要是为了下面的npm(有待再次理解)。
- npm:管理javascript包。比如可以用来安装react-native。
- react-native-cli:React Native的命令行工具。
具体的安装就没写,官网以及很多文章都有讲,安装完以后就是下面这样的。
Egos-MacBook-Pro:Users Egos$ react-native -version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
基本指令
介绍几个需要基本掌握的指令,对于熟悉的同学就跳过了。
nvm list // 查看所有安装的node版本信息。
nvm alias default v7.4.0 // 设置默认的node版本(这里设置成了7.4.0),可能有些版本有些兼容性的问题。
nvm ls-remote // 查看更新了的node的版本(可能需要翻墙)
nvm install v7.4.0 // 安装node
// 全局安装react-native命令行工具
npm uninstall -g react-native-cli // 先卸载再安装
npm install -g react-native-cli // 可以用一些react-native命令,比如react-native --help
npm info react-native // 查看某个模块最新发布版本信息(这里查看react-native发布的版本信息)
npm install --save react-native@0.41.1 // 升级或者降级react-native的版本并且更新package.json,需要用在react-native项目目录下
react-native --help // 查看react-native的帮助信息
react-native start // 开启服务
react-native run-android // 运行Android
初体验
主要说明一下每个文件代表的意思,Trinea大大的这篇的文章React Native 你该了解的 Hello World很详细了。
react-native init HeloWorld // 初始化一个react-natvie项目,网络原因可能导致比较的慢
react-native run-android // 运行到Android手机。
- android/ios文件夹中存储的是各自平台的代码。到这里以后是可以直接在Android Studio打开android包下面的android项目运行的。
- index.android.js和index.ios.js分别是Android和IOS的入口。理解为Java的main函数或者Android的LAUNCHER。
- __tests__ 测试文件夹。
- package.json,跟Node工程类似,用于描述项目的基本信息以及需要的依赖信息。
- node_modules文件夹,自动生成的文件夹,存放package.json中的。
- .watchmanconfig 为 watchman 的配置文件,watchman 用于监控文件变化,辅助实现工程修改所见即所得。
- .flowconfig 为 flow 的配置文件,flow 用于代码静态检查。
- .buckconfig 为 buck 的配置文件,buck 是 Facebook 开源的高效编译系统,对 Android iOS 同时适用,通过复用未修改的代码单元、增量编译等提高编译效率。
运行流程分析
react-native run-android
以后到底是干了什么?
Egos-MacBook-Pro:HelloWorld Egos$ react-native run-android
JS server already running. // server启动,会打开另外一个terimal窗口
Running /Users/Egos/Library/Android/sdk/platform-tools/adb -s FA54AYJ05343 reverse tcp:8081 tcp:8081 // 反向代理8081端口
Building and installing the app on the device (cd android && ./gradlew installDebug)... // android的gradle命令打包apk并且安装apk
// 执行完打包命令以后
Starting the app on FA54AYJ05343 (/Users/Egos/Library/Android/sdk/platform-tools/adb -s FA54AYJ05343 shell am start -n com.helloworld/.MainActivity).. // 打开MainActivity
// 现在另外一个terimal窗口
transformed 388/388 (100%) // 将文件传到手机上
// 到此手机就展示出来了
更新React代码以后重新reload的操作,可以看出是将代码重新transforme到手机上。
<START> Updating existing bundle outdated_modules: 1
<START> Transforming files
<END> Transforming files (1ms)
<END> Updating existing bundle (232ms) outdated_modules: 1
Requesting bundle (256ms) bundle_url: /index.android.bundle?platform=android&dev=true&hot=false&minify=false
不更新代码reload的操作。没有transforme操作。
<START> Requesting bundle bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=false
Requesting bundle (16ms)bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=false
打包
没有尝试使用React Native自带的打包,使用gradle打包。与普通项目的打包方式是一样的,如果不知道的话,可以自行搜索解决。
signingConfigs {
// 配置release variants打包内容
release {
keyAlias signConfig.get('key.alias')
keyPassword signConfig.get('key.alias.password')
storePassword signConfig.get('key.store.password')
storeFile file(signConfig.get('key.store'))
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
signingConfig signingConfigs.release // 配置打包release的时候使用signingConfigs中的release配置
}
}
一些疑问
- 只支持com.android.tools.build:gradle:1.3.1?这个问题肯定是错误的。每次init一个项目的时候都是1.3.1,觉得很奇怪,是可以修改的。
- 只能在命令行里面run?肯定不是。可以用相应的Android Studio/Xcode打开android/ios的项目运行。
- 反编译得到的代码不能看出来是不是正确的?反编译一个React Native app以后看不到与运行出来内容相关的东西,那么react之类的代码去哪了呢,目前这个问题还没有代码,知道的可以恢复下。^-^
- React Native和React Native Cli有什么区别?React Native Cli是为React Native提供命令行的一个脚本(这里的理解可能有一些出入)。比如run-android就会在里面封装好,然后就可以react-native run-android了。
- 包冲突,例如v4包?可以exclude掉。
还有一些问题,运行错误,错误不展示,怎么更改入口js的名字等等都可以自行搜索出来,可能我碰到的也不一样。还有一些比如加速transforme的操作,自己还没有去实践。
体会
Learn once, write anywhere. 自己也在ios的模拟器上面跑了一下,也是很方便的。确实可以做到一份代码就完成了android和ios两个平台开发。但是android和ios界面也是有很多不一样的体验,当然代码也是可以做到在两个平台的ui分别展示不同的样式。但对于一个已经比较完善的代码直接改成React Native来说成本还是比较大的,目前看来可能会在已有的项目中集成React Native。
参考:
Facebook官方资料
React Native: 配置和起步
React Native: Android 的打包