1.React Native起步和思考

2019-11-09 14:28:30

字体：大中小

来源：转载

供稿：网友

好久没有写博客，一直在用自己的印象笔记记录一些问题。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 -versionreact-native-cli: 2.0.1react-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 --helpnpm 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-androidJS 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: 1Requesting 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=falseRequesting 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 的打包

上一篇：app store无法下载、安装软件，一直在转圈的一个解决方法

下一篇：Material Design实现应用动态改变色调的方法