标签:React-Native

安卓开发

【React Native】使用Code Push进行热更新

很多时候在实际开发中考虑使用RN的原因不仅仅是因为使用js开发能使得UI界面达到跨平台特性,还有一个重要原因就是热更新方便。对于需要经常使用热更新来发布新版本的App来说,这是RN的一个重大优势。因为RN的热更新非常方便。下面重点讲解下使用微软提供的CodePush来进行热更新。 CodePush是微软提供一个应用中心云服务平台(CodePush is an App Center cloud service),或许是考虑到RN的影响力,CodePush内部集成了对RN代码的热更新功能,即react-native-code-push。该工具是一个js模块,在命令行运行。所以首先需要安装该模块。 在客户端使用CodePush的SDK的详细介绍可以参看官方文档:https://docs.microsoft.com/en-us/appcenter/distribution/codepush/react-native 在安卓端使用CodePush包含2个步骤: 用codePush高阶组件包装根组件: [crayon-5f03c4080cffa591590487/] 配置更新规则 默认情况下,CodePush将在每个应用程序启动时检查更新。如果有更新可用,它将被静默下载,并在下一次重新启动时安装。如果你希望修改更新检查规则,可以通过如下方式: [crayon-5f03c4080cffb142443306/] 上面这段代码是设置App每次从后台恢复时查询更新。如果你不想自动检查更新,而是当用户点击更新按钮时再检查,那么可以配置checkFrequency为MANUAL即可。如下所示: [crayon-5f03c4080cffd768612015/] 更新检测代码基本上是模板代码,关于更新检测更多用法可以直接参看官方示例即可:https://github.com/Microsoft/react-native-code-push/blob/master/Examples/CodePushDemoApp/App.js  大家可以根据自己的需求选择配置项。 在安卓端和js端关于CodePush热更新逻辑都完成之后,即可将我们更新后的bundle文件推送给appcenter云端,这样在用户使用我们的app时CodePush SDK就会根据我们在代码中的配置选择更新。主要包括以下2个步骤 微软的code-push release命令是通用的发布更新命令,对于RN而言,还包含一个code-push release-react命令,使用该命令会自动为你生成的应用更新内容(JS包和资源),而不需要你先运行react-native bundle,然后执行code-push release。该命令支持通用发布更新相同的所有参数: [crayon-5f03c4080d006768371673/] 该命令会去自动执行react-native bundle命令生成将要发布到CodePush服务的更新(JS Bundle和资源),同时会自动使用定义在项目文件build.gradle(Android)里的版本名,推断targetBinaryVersion的值(当然你也可以通过–targetBinaryVersion参数指定)。如下是前面那个发布更新的relaese-react版: [crayon-5f03c4080d008915315034/] 只需执行一个命令release-react,然后指定一些参数即可完成前面需要2个命令完成的事情。推荐大家使用这种方式对RN进行热更新。 RN热更新可以概括为以下几个步骤: 在安卓代码和js代码中引入CodePush SDK设置好热更新逻辑 使用react-native模块的命令将更新后的js文件打包为bundle文件 使用CodePush的命令来添加app或者推送bundle文件到微软appcenter云端 从上面可以看到RN的热跟新还是非常简单的,这也是RN的一大优势。  

安卓开发

【React Native】js端调用安卓原生模块及2端互相通信

前面React Native编译常见问题解决和官方demo分析一文介绍了FaceBook的RN官方demo,初步介绍了官方demo的一些重要的模块及其作用。这一节就来讲解下如何在js端调用安卓原生模块,以及js端和安卓原生模块之间的互相通信的几种方式和他们的特点。因为对于任何一个跨语言的开发框架来讲,在开发过程中2端之间的相互调用和消息传递是非常基础和也是非常重要的。就像NDK开发(java和c/c++互相调用)和WebView使用一样(java和js互相调用)。 这里以改造官方demo为例,因为自己接触RN是因为我们的验证码SDK有个客户希望能给一个RN的demo,所以这里以在js代码中点击登陆按钮调用易盾验证码SDK为例进行讲解。期望达到的效果是: 点击js代码中的登陆按钮,显示验证码界面(js端调用安卓原生模块) 滑动验证码验证通过,js端弹出一个“验证成功”提示框,反之弹出“验证失败”提示框(安卓端与js端通信) 这个demo能够很好的把js端调用安卓原生模块(验证码SDK)和安卓端向js端传递消息(告知验证是否通过)包含进来。打个广告,欢迎大家使用网易易盾验证码SDK服务进行行为式验证,告别繁琐的输入字符验证:http://dun.163.com/trial/jigsaw 首先修改demo的App.js。添加一个按钮以及监听事件。 [crayon-5f03c4080d478166380808/] 在登陆按钮的事件响应函数中调用安卓端的SDK,所以接下来就是在安卓端创建要被js调用的原生模块。 2端之间的消息传递方式可以概括为以上3种方式,我们一个一个来看。        

安卓开发

React Native编译常见问题解决和官方demo分析

React-Native是FaceBook在2015年推出的一个能够使用javascript语言开发原生App的框架(A framework for building native apps with React)。为何叫做React-Native呢?个人理解是因为该框架的js代码部分是基于React.js这个开源组件的,用React.js开发native应用(React Native lets you build mobile apps using JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.) ES6标准的js:RN的开发语言是js,而且是基于ES6标准的js语法。所以如果你之前不是做前端的,而是做ios或者安卓开发(比如像我这样),那么需要你对ES6标准的js语法有大致了解。不然后面分析官方demo的js部分的时候会一脸懵逼的。不用了解的很深入,因为细节部分可以随着你自己实际工作遇到再深入研究。ES6标准的js教程推荐大家看:http://es6.ruanyifeng.com/#docs/module 和https://blog.csdn.net/qq_27552077/article/details/72902926 React.js:前面说过RN的js部分是基于React.js。而React.js可以看作是一个前端UI组件化的库,而且React.js和js不同的是React.js可以在js代码中插入html标签。实际上这种新的语法叫做JSX。关于React.js和JSX介绍推荐大家看http://huziketang.mangojuice.top/books/react/lesson1。写的超级棒,作为一个几乎从没接触过js,一直搞安卓开发的我一看就能明白,很少看到介绍原理性技术文章能写的这么好的教程了,而且作者讲解React.js是从一个js的demo开始,然后不断封装重构为组件化形式。这对你后面分析官方demo的js部分很有帮助。所以如果你想学习了解React.js的话推荐你一定要看下。 虽然在这里说了学习RN需要的一些前置基础,但我不推荐大家先学习这2个知识点之后再来学习RN(除非你本身就是做前端的)。而是推荐大家先分析官方demo,然后在不明白的地方回过头来从那2个知识点处学习。原因还是我一直强调的学习要带有目标感。带着某个疑惑去学习,学习的目的就是从你打算学习的知识点中去寻找能够解决你当前疑惑的方法。当你了解完React.js之后如果这个疑惑没有了就说明学习有效果。也就是用输出倒逼输入。不然的话对于这种语法性和原理性的知识点直接去看的话很容易走马观花,抓不到重点,过后即忘。 前面说过RN是使用js语言进行开发,所以你的机器上需要有能够运行js的环境,即安装node.js环境。关于环境搭建这块就不说了。大家直接参看官方文档,按照官网步骤一步一步来就行了。官方文档地址:https://facebook.github.io/react-native/docs/getting-started.html 搭建好环境之后,选择一个路径,然后执行如下命令来获取官方demo工程 react-native init AwesomeProject 注意:该命令还可以通过–version(前面是2个-)参数指定使用的RN的版本号,例如react-native init AwesomeProject –version 0.55.4 。 –version这个参数很重要,因为可能默认版本0.56在某些情况下会存在很难bug,那么这个时候可以考虑换一个版本(我自己测试时0.56版本就出现过一个很难解决的问题,在StackOverflow上有歪果仁遇到过同样问题,使用0.55.4版本就没这个问题) 该命令正确执行完成之后会在当前路径下生成一个名为AwesomeProject的工程目录,该目录即是FaceBook的RN的官方demo工程代码,目录结构如下所示: 其中比较重要的几个目录就是上图圈红的几个 android:RN的安卓原生工程 ios:RN的ios原生工程 node_modules:js模块库(其中就包含react-native的RN模块),因为RN是使用js开发,所以需要js的基础库,就像python开发需要python库支持一样。 App.js:可以认为是RN代码UI组件模块 index.js:可以认为RN代码执行时的入口,一般会在该文件中进行js模块注册。这个模块名称(即index)要和安卓原生代码中的ReactApplication的getJSMainModuleName方法返回值保持一致 package.json:js模块的项目配置文件,比如项目依赖的react和react-native的版本号等 然后执行如下2个命令即可自动编译安卓上的apk。 cd AwesomeProject react-native run-android 官方demo包含2部分,一部分是RN层的js代码,一部分是安卓原生的java代码。先分析下RN部分,即index.js和App.js。 RN的js部分的代码就分析完了,接下来看下demo的android的原生部分代码,也很简单就只包括2个类文件MainActivity.java和MainApplication.java。因为安卓App最先执行的是Application。所以先看下MainApplication。