React Native学习资料

本文记录React Native 从环境搭建、签名打包等等一些资料。

React Native进行签名打包成Apk

对于项目中不存在react.gradle文件的项目打包

首先命令切换到该react native项目的主目录，然后运行以下的命令，生成assets文件夹

mkdir -p android/app/src/main/assets

紧接着运行以下命令，进行生成inde.android.bundle文件

1
2
3

react-native bundle --platform android --dev false --entry-file index.android.js \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest android/app/src/main/res/

最后运行之前的命令，进行代码和资源文件打包，生成的带有签名的apk还是在上面的目录中。

cd android && ./gradlew assembleRelease

注意：这时有可能不成功，报红色的错误

1
2
3

* What went wrong:
Execution failed for task ':app:processReleaseResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'D:\software\android\sdk\build-tools\23.0.1\aapt.exe'' finished with non-zero exit value 1

这可能是由于在生成res时图片资源的名称过长，超过了windows的限制导致的。

运行Apk

cd android && ./gradlew installRelease

React Native库版本升级(Upgrading)与降级讲解

更新React Native项目依赖包版本

查看本地的React Native的版本

react-native --version

查询react-native的npm包得最新版本(react native的npm包的地址为: https://www.npmjs.com/package/react-native )，或者采用命令npm info react-native进行查看。

在修改package.json文件后，我们需要命令行切换到项目的主文件夹重新执行

npm install

根据官网文档能知道:
现在已经支持在项目中运行npm install - -save命令来进行安装react-native的新版本了，例如我们需要更新到0.18版本可以采用终端执行如下的命令:

npm install --save react-native@0.18

更新项目templates文件

新的npm包会包含更新在运行react-native init命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码

react-native upgrade

以上的react-native upgrade会进行检查项目的文件，然后进行如下几个操作:

如果是新添加的文件，会进行直接创建
如果更新的文件和当前项目的文件是一样的，就会直接忽略跳过
如果更新的文件和当前项目的文件不同，有冲突的情况，会让我们进行选择是保留原来的文件还是用更新的文件覆盖，这个要看实际情况了。

现在更新已经完成了，下面就是运行一下看一下是否能够成功运行，运行如下命令:

react-native run-android

React Native版本降级方法

刚刚我们已经完成React Native库升级了，现在假如有这样的一个情况，我们的项目直接创建的用了最新版本的，突然发现最新版本可能不太稳定，在开发过程中就会遇到不可预期的bug。那么就可以考虑进行降级到一个比较稳定的版本比较保险。第一种方案我们参考上面的流程就行了，上面是修改成最新版本的，那么现在我们修改一个低版本，然后执行上面的同样的命令就OK了。但是我们降级这边给大家讲第二个方案，还记得上面有一个官方推荐安装react-native的命令不？

npm install --save react-native@0.18

那么我们现在假如要降级到0.17版本，如下命令行执行一下就OK了。

npm install --save react-native@0.17

总结
无论是升级还是降级只需要两步，先后执行下面两个命令

1
2
3

npm install --save react-native@0.18

react-native upgrade

参考资料：

环境安装：
【React Native开发】React Native For Android环境配置以及第一个实例
 史上最详细Windows版本搭建安装React Native环境配置
 【React Native开发】React Native进行签名打包成Apk
【React Native开发】React Native库版本升级(Upgrading)与降级讲解

移动端数据库新王者-Realm React Native版本应用详解之抛砖引玉入坑篇(一)
移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇(二)
移动端数据库新王者-Realm React Native版本应用详解之略陈固陋爬坡篇续1(三)

React Native技术文章：
[319-React Native上海交流会报告]-React Native跨平台开发之旅PPT内容(附下载链接)
React Native开发阶段性总结(2016-5-20)
[RN实战-嘎嘎商城]之仿快递时间轴布局实现(订单状态)
[RN实战-嘎嘎商城]之轻松实现Tab底部菜单导航栏切换效果-Android/iOS双适配
 [RN实战-嘎嘎商城]之商家详情界面布局分析与实现
 [RN实战-嘎嘎商城]之记一次项目Redux重构
 React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

React Native工具插件：
React Native VSCode IDE超强开发插件介绍(智能,代码提醒,运行调试…)
【React Native开发】React Native API模块之NetInfo(网络信息)使用详解(28)
【React Native开发】React Native API模块之AsyncStorage(持久化存储)使用详解(29)
【React Native开发】React Native控件之TabBarIOS和TabBarIOS.Item组件详解及实例(40)
【React Native开发】React Native控件之ProgressViewIOS进度加载组件详解及实例(41)
【React Native开发】React Native控件之ActivityIndicatorIOS进度指示器组件详解及实例(42)

React Native Running And Debugging
【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)

编译其它React Native项目：
超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)

疑难汇总：
React Native疑难点,问题深坑最强总结帖(不断更新中)

Android Studio项目配置：
优雅的Android Studio项目配置–常用库和版本管理

Android控件资料：
Design支持库TabLayout打造仿网易新闻Tab标签效果
 打造QQ6.X最新版本侧滑界面效果实例

工具技术：
干货分享:分析Android应用使用的技术框架和开源库
 实时消息:JetBrains正式发布Kotlin 1.0，JVM和Android上更好用的语言