1.React Native起步和思考

好久没有写博客，一直在用自己的印象笔记记录一些问题。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手机。

1. android/ios文件夹中存储的是各自平台的代码。到这里以后是可以直接在Android Studio打开android包下面的android项目运行的。
2. index.android.js和index.ios.js分别是Android和IOS的入口。理解为Java的main函数或者Android的LAUNCHER。
3. __tests__ 测试文件夹。
4. package.json，跟Node工程类似，用于描述项目的基本信息以及需要的依赖信息。
5. node_modules文件夹，自动生成的文件夹，存放package.json中的。
6. .watchmanconfig 为 watchman 的配置文件，watchman 用于监控文件变化，辅助实现工程修改所见即所得。
7. .flowconfig 为 flow 的配置文件，flow 用于代码静态检查。
8. .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 的打包