零基础用react-native开发android app

jopen 8年前
 

序

这篇博客旨在帮没有任何android或者ios开发经验的开发者体验一把当下热门的react-native。由于我之前也没有native app的开发经验，所以这篇文章中引用了很多我学习过程中碰到的简短有用的资料，方便大家少走些弯路。

react-native介绍

直接去 官网 看,不用挂V*N。总而言之，这货就是用写web的方式去写原生应用。布局用css，代码用react的框架。而且不是hybrid app，所以体验很流畅。

关于更多react 及react-native的知识。可以参考 汇总知识 以及 知乎大牛 。

总而言之，如果要给app分类的话：

1.webapp： 移动端的web页面，纯浏览器应用。

2.native-app： Java或者oc、swift开发的app，用的本地的组件以及布局。

3.hybrid-app： 介于以上两者之间。即有原生的组件，又封装了webview在里面以便渲染web组件。而这方面有很多框架，典型的如ionic。

而对于react-native，准确的说，应该是属于native app，因为他的渲染完全是本地方式，不靠webview。但是写代码的方式又是web前端。如何做到的呢？参考 react原理 。

上手react-native

QUICK START

如果没有接触过RN(react-native)，强烈建议第一件事是去花几十分钟把 QUICK START 做一遍，遇到不懂的直接照做，不用纠结原因，全当是搭环境。

对于RN android的环境搭建步骤主要有：

  1. react-native部分 ：主要是npm安装react-native-cli工具。这个可以创建工程，运行工程，打包工程等。按照官网教程一步一步来就行了。

  2. android部分 ：主要是android SDK，模拟器（推荐Genymotion，方便。）

  3. 运行: 主要原理是，react-native run-android这条命令会编译并打包一个用来debug的apk，并安装到模拟器或者手机。但是debug版本的apk并不是独立的apk，每次运行需要从pc上加载你所写的js代码，所以pc上同时自动运行了一个server。之所以这样做是为了方便调试。每次你改完代码后， watchman 会检查到改动。同时模拟器或者真机上的debug版程序会有调试功能，你可以在模拟器中重新加js载脚本，改动就被拉到了移动端。 至于怎么发布独立apk参考下文。

react开发理念

相信做完上面的quick start，你应该已经会自己创建一个RN工程，在模拟器上跑起来了。 如果依旧对react本身的一些概念（如JSX，组件，state）不太了解，可以看下 阮一峰的博客 。

react-native工程

工程结构

react-native init命令可以创建一个RN的工程，初次创建出来结构是这个样子的。

零基础用react-native开发android app

  1. node_modules和 package.json 。这个就不必多说了，RN工程也是使用npm去管理依赖的。默认的依赖只有react-native一个包，就是RN自己的代码。

  2. android这个目录。这是一个标准的android工程，非死book并没有施加什么魔法，去改造android工程。最终代码写完后要发布也只需这个android工程就行了。 ios 目录也是一样的， 是个Xcode工程。

    那么RN的代码怎么生效的呢？实际上在根目录下执行react-native run-android后，android工程中gradle的依赖关系会去先编译node_modules下RN的代码，并加入自己的工程中。这也就是第一次跑的时候构建比较慢并且需要装NDK的原因。

  3. index.android.js和index.ios.js这就是RN工程的主入口，你可以按照自己的组织方式，写很多react的组件组合成自己的app。最终所有的代码会根据这个入口文件加载成一个单一的js文件 index.android.bundle 加入到android工程中。android的工程有js解释器去执行你的代码。这样一个独立的app就诞生了。

二次开发

当然不是每个工程都需要自己重头去创建空工程然后一步步加各种依赖，创建每个文件。我们很多时候是想用别人的一个开源项目做二次开发。那么如何导出自己的源码给别人用，以及怎么用别人的模板程序做二次开发？

上文介绍了android目录的结构，那么我们发布我们的源码时，实际只要这些依赖关系就行了。android只要工程依赖，不要编译过后的东西。RN本 身也只要package.json就行了。这样几百M 的工程只要几M别人就可以使用了。这些不需要拷贝的东西可以参考我的 ignore文件 。

其实这样导出的工程跟react-native init创建的是一样的。只是少了node_modules，同时多了一些android工程的gradle依赖或者js源码。因此使用的时候要先用npm install安装RN部分的依赖。然后直接react-native run-android就会编译android部分的依赖并在模拟器上跑起来了。

如何装RN的插件？

从上文可以看出，RN实际有两套构建系统。

  1. npm用来管理RN的插件。

  2. android或者ios自己的构建系统。

    所以装插件比较麻烦。以 react-native-icons 这个插件举例。除了npm install之外，还需要改gradle文件，并通过改java代码去加载包。明白了原因就行了，麻烦就麻烦点，好在比较好的插件文档都比较详细。

打包

原理

我们的debug程序中，js代码是调试时，不断从server加载到移动端的。但是发布成独立apk时，总不能让app启动的时候远程加载js 代码吧。RN的做法是将所有js打成一个bundle文件，作为android的资源，放在assets目录下面。而assets下的文件是会在安装时， 随工程一并安装到移动端本地的。这样apk安装好后，RN会负责去加载。

步骤

  • 将js代码导成资源

    目前android版本需要手动去做。参考 issues 。相信非死book后面的版本会马上会发布自动导资源的命令。实际现在也挺简单：当react-native的server启动后。把http://localhost:8081/index.android.bundle?platform=android这个地址的js拷出来即可。

    • cd to the project directory

    • Start the react-native packager if not started

    • Download the bundle to the asset folder: curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

  • 生成签名apk

    参考 官网教程 。这里不用android studio，纯命令行就可以，官网教程很详细。最后生成的apk在android/app/build/outputs下面。

  • 嫌麻烦可以把以上步骤放在一个 shell脚本 中。

示例

apk下载

github

如有什么疑问，可以直接在SF或者github的issue提问。

后面我会写一篇介绍这个项目的 代码组织 ，以及 雨点儿网 API的博客。