Android React Native 热更新 自己搭建热更新平台

最新推荐文章于 2024-07-31 23:34:46 发布
最新推荐文章于 2024-07-31 23:34:46 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： Android React Native 文章标签： android native

使用react native 大家最主要的是看重脸书推图的热更新功能，然而现在目前大多数的热更新都是基于第三方框架上实现的，假使某一天第三方框架停止维护，或者收费你是不是觉得很坑呢。

     我们都知道react native是使用bundle实现热更新的，那么我们只需要替换bundle文件就可以实现更新操作了。安装包中的bundle文件是在asset目录下的，而asset目录我们是没有写权限的，所以我们不能修改安装包中的bundle文件。好在RN中提供了修改读取bundle路径的方法。以android为例(ios的类似)，在ReactActivity类中有这么一个方法

/**
 * Returns a custom path of the bundle file. This is used in cases the bundle should be loaded
 * from a custom path. By default it is loaded from Android assets, from a path specified
 * by {@link getBundleAssetName}.
 * e.g. "file://sdcard/myapp_cache/index.android.bundle"
 */
protected @Nullable String getJSBundleFile() {
  return null;
}

该方法返回了一个自定义的bundle文件路径，如果返回默认值null，RN会读取asset里的bundle。我们在MainActivity类中重写这个方法，返回可写目录一下的bundle文件路径：

@Override
protected @Nullable String getJSBundleFile() {
    String jsBundleFile = getFilesDir().getAbsolutePath() + "/index.android.bundle";
    File file = new File(jsBundleFile);
    return file != null && file.exists() ? jsBundleFile : null;
}

如果可写目录下没有bundle文件，还是返回null，RN依然读取的是asset中的bundle，如果可写目录下存在bundle，RN就会读取可写目录下的bundle文件。

我们在RN项目根目执行以下命令来得到bundle文件和图片资源:

 
 

  
  react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.bundle --platform android --assets-dest ./bundle --dev false

所以我们只需要知道这一点就可以实现自己的热更新需求啦，具体的下载和生成bundle和资源文件可以参考http://www.jianshu.com/p/2cb3eb9604ca。


1、打包生成bundle文件，其中资源文件也需要打包：

在rn项目根目录执行以下命令：

react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.bundle --platform android --assets-dest ./bundle --dev false


会得到如此目录的文件，其中图片也在里面。


2，将上面的文件放入文件夹中压缩，放到自己的服务器上。（这里我自己搭建了一个入服务器）


3，将文件下载到本地，进行解压

package com.topdraw.melody.download;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnCancelListener;
import android.os.AsyncTask;
import android.util.Log;

import com.topdraw.melody.MainActivity;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;

public class DownLoaderTask extends AsyncTask<Void, Integer, Long> {
   private final String TAG = "DownLoaderTask";
   private URL mUrl;
   private File mFile;
   private ProgressDialog mDialog;
   private int mProgress = 0;
   private ProgressReportingOutputStream mOutputStream;
   private Context mContext;
   public DownLoaderTask(String url,String out,Context context){
      super();
      if(context!=null){
         mDialog = new ProgressDialog(context);
         mContext = context;
      }
      else{
         mDialog = null;
      }

      try {
         mUrl = new URL(url);
         String fileName = new File(mUrl.getFile()).getName();
         mFile = new File(out, fileName);
         Log.d(TAG, "out="+out+", name="+fileName+",mUrl.getFile()="+mUrl.getFile());
      } catch (MalformedURLException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }

   }

   @Override
   protected void onPreExecute() {
      // TODO Auto-generated method stub
      //super.onPreExecute();
      if(mDialog!=null){
         mDialog.setTitle("Downloading...");
         mDialog.setMessage(mFile.getName());
         mDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
         mDialog.setOnCancelListener(new OnCancelListener() {

            @Override
            public void onCancel(DialogInterface dialog) {
               // TODO Auto-generated method stub
               cancel(true);
            }
         });
         mDialog.show();
      }
   }

   @Override
   protected Long doInBackground(Void... params) {
      // TODO Auto-generated method stub
      return download();
   }

   @Override
   protected void onProgressUpdate(Integer... values) {
      // TODO Auto-generated method stub
      //super.onProgressUpdate(values);
      if(mDialog==null)
         return;
      if(values.length>1){
         int contentLength = values[1];
         if(contentLength==-1){
            mDialog.setIndeterminate(true);
         }
         else{
            mDialog.setMax(contentLength);
         }
      }
      else{
         mDialog.setProgress(values[0].intValue());
      }
   }

   @Override
   protected void onPostExecute(Long result) {
      // TODO Auto-generated method stub
      //super.onPostExecute(result);
      if(mDialog!=null&&mDialog.isShowing()){
         mDialog.dismiss();
      }
      if(isCancelled())
         return;
      ((MainActivity)mContext).showUnzipDialog();
   }

   private long download(){
      URLConnection connection = null;
      int bytesCopied = 0;
      try {
         connection = mUrl.openConnection();
         int length = connection.getContentLength();
         if(mFile.exists()&&length == mFile.length()){
            Log.d(TAG, "file "+mFile.getName()+" already exits!!");
            mFile.delete();
         }
         mOutputStream = new ProgressReportingOutputStream(mFile);
         publishProgress(0,length);
         bytesCopied =copy(connection.getInputStream(),mOutputStream);
         if(bytesCopied!=length&&length!=-1){
            Log.e(TAG, "Download incomplete bytesCopied="+bytesCopied+", length"+length);
         }
         mOutputStream.close();
      } catch (IOException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }
      return bytesCopied;
   }
   private int copy(InputStream input, OutputStream output){
      byte[] buffer = new byte[1024*8];
      BufferedInputStream in = new BufferedInputStream(input, 1024*8);
      BufferedOutputStream out  = new BufferedOutputStream(output, 1024*8);
      int count =0,n=0;
      try {
         while((n=in.read(buffer, 0, 1024*8))!=-1){
            out.write(buffer, 0, n);
            count+=n;
         }
         out.flush();
      } catch (IOException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }finally{
         try {
            out.close();
         } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
         }
         try {
            in.close();
         } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
         }
      }
      return count;
   }
   private final class ProgressReportingOutputStream extends FileOutputStream{

      public ProgressReportingOutputStream(File file)
            throws FileNotFoundException {
         super(file);
         // TODO Auto-generated constructor stub
      }

      @Override
      public void write(byte[] buffer, int byteOffset, int byteCount)
            throws IOException {
         // TODO Auto-generated method stub
         super.write(buffer, byteOffset, byteCount);
         mProgress += byteCount;
         publishProgress(mProgress);
      }

   }
}

这个是下载文件的类。 



package com.topdraw.melody.download;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnCancelListener;
import android.os.AsyncTask;
import android.util.Log;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Enumeration;
import java.util.zip.ZipEntry;
import java.util.zip.ZipException;
import java.util.zip.ZipFile;

public class ZipExtractorTask extends AsyncTask<Void, Integer, Long> {
   private final String TAG = "ZipExtractorTask";
   private final File mInput;
   private final File mOutput;
   private final File deletmOutput;
   private final ProgressDialog mDialog;
   private int mProgress = 0;
   private final Context mContext;
   private boolean mReplaceAll;
   public ZipExtractorTask(String in, String out, Context context, boolean replaceAll){
      super();
      mInput = new File(in);
      mOutput = new File(out);
      deletmOutput= new File(out+"/bundle");
      if(!mOutput.exists()){
         if(!mOutput.mkdirs()){
            Log.e(TAG, "Failed to make directories:"+mOutput.getAbsolutePath());
         }
      }
      if(context!=null){
         mDialog = new ProgressDialog(context);
      }
      else{
         mDialog = null;
      }
      mContext = context;
      mReplaceAll = replaceAll;
   }
   @Override
   protected Long doInBackground(Void... params) {
      // TODO Auto-generated method stub
      return unzip();
   }

   public void deleteAllFiles(File root) {
      File files[] = root.listFiles();
      if (files != null)
         for (File f : files) {
            if (f.isDirectory()) { // 判断是否为文件夹
               deleteAllFiles(f);
               try {
                  f.delete();
               } catch (Exception e) {
               }
            } else {
               if (f.exists()) { // 判断是否存在
                  deleteAllFiles(f);
                  try {
                     f.delete();
                  } catch (Exception e) {
                  }
               }
            }
         }
   }
   @Override
   protected void onPostExecute(Long result) {
      // TODO Auto-generated method stub
      //super.onPostExecute(result);
      if(mDialog!=null&&mDialog.isShowing()){
         mDialog.dismiss();
      }
      if(isCancelled())
         return;
   }
   @Override
   protected void onPreExecute() {
      // TODO Auto-generated method stub
      //super.onPreExecute();
      if(mDialog!=null){
         mDialog.setTitle("Extracting");
         mDialog.setMessage(mInput.getName());
         mDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
         mDialog.setOnCancelListener(new OnCancelListener() {

            @Override
            public void onCancel(DialogInterface dialog) {
               // TODO Auto-generated method stub
               cancel(true);
            }
         });
         mDialog.show();
      }
   }
   @Override
   protected void onProgressUpdate(Integer... values) {
      // TODO Auto-generated method stub
      //super.onProgressUpdate(values);
      if(mDialog==null)
         return;
      if(values.length>1){
         int max=values[1];
         mDialog.setMax(max);
      }
      else
         mDialog.setProgress(values[0].intValue());
   }
   private long unzip(){
      long extractedSize = 0L;
      Enumeration<ZipEntry> entries;
      ZipFile zip = null;
      deleteAllFiles(deletmOutput);
      try {
         zip = new ZipFile(mInput);
         long uncompressedSize = getOriginalSize(zip);
         publishProgress(0, (int) uncompressedSize);

         entries = (Enumeration<ZipEntry>) zip.entries();
         while(entries.hasMoreElements()){
            ZipEntry entry = entries.nextElement();
            if(entry.isDirectory()){
               continue;
            }
            File destination = new File(mOutput, entry.getName());
            if(!destination.getParentFile().exists()){
               Log.e(TAG, "make="+destination.getParentFile().getAbsolutePath());
               destination.getParentFile().mkdirs();
            }
            if(destination.exists()&&mContext!=null&&!mReplaceAll){

            }
            ProgressReportingOutputStream outStream = new ProgressReportingOutputStream(destination);
            extractedSize+=copy(zip.getInputStream(entry),outStream);
            outStream.close();
         }
      } catch (ZipException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      } catch (IOException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }finally{
         try {
            zip.close();
         } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
         }
      }

      return extractedSize;
   }

   private long getOriginalSize(ZipFile file){
      Enumeration<ZipEntry> entries = (Enumeration<ZipEntry>) file.entries();
      long originalSize = 0l;
      while(entries.hasMoreElements()){
         ZipEntry entry = entries.nextElement();
         if(entry.getSize()>=0){
            originalSize+=entry.getSize();
         }
      }
      return originalSize;
   }

   private int copy(InputStream input, OutputStream output){
      byte[] buffer = new byte[1024*8];
      BufferedInputStream in = new BufferedInputStream(input, 1024*8);
      BufferedOutputStream out  = new BufferedOutputStream(output, 1024*8);
      int count =0,n=0;
      try {
         while((n=in.read(buffer, 0, 1024*8))!=-1){
            out.write(buffer, 0, n);
            count+=n;
         }
         out.flush();
      } catch (IOException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }finally{
         try {
            out.close();
         } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
         }
         try {
            in.close();
         } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
         }
      }
      return count;
   }

   private final class ProgressReportingOutputStream extends FileOutputStream{

      public ProgressReportingOutputStream(File file)
            throws FileNotFoundException {
         super(file);
         // TODO Auto-generated constructor stub
      }

      @Override
      public void write(byte[] buffer, int byteOffset, int byteCount)
            throws IOException {
         // TODO Auto-generated method stub
         super.write(buffer, byteOffset, byteCount);
         mProgress += byteCount;
         publishProgress(mProgress);
      }

   }
}

这个是解压的类。



4.重写此方法，改变bundle读取的位置



一只想颠覆世界的蚂蚁
关注
专栏目录
React-Native 热更新尝试（Android）
vv_bug
03-09 6341
前言：由于苹果发布的ios的一些rn的app存在安全问题，主要就是由于一些第三方的热更新库导致的，然而消息一出就闹得沸沸扬扬的，导致有些人直接认为“学了大半年的rn白学啦～～！！真是哭笑不得。废话不多说了，马上进入我们今天的主题吧。“因为一直在做android开发，所以今天也只是针对于android进行热更新尝试（ios我也无能为力哈，看都看不懂，哈哈～～～）。先看一下效果：怎么样？效果还是不错的吧
react-native android热更新详解（1）
轻量开发
11-06 507
快速入门-准备工作 首先你应该有一个基于React Native开发的应用，我们把具有package.json的目录叫做你的"应用根目录"。 如果你还没有初始化应用，请参阅开始使用React Native。 所以我们也假设你已经拥有了开发React Native应用的一切环境，包括Node.js、npm、XCode、Android SDK等等。 安装 在你的项目根目录下运行以下命令： ...
react native 自建热更新服务器
chuanhuanfen1312的博客
12-05 148
参考code-push-server网站：文档 参考code-push-demo-app：demo 在使用过程中有一些小细节： 1、总是提示 app up to date android中使用时确认好versionName的版本，比如1.0.0 后不能随意修改，否则不会更新，因为更新校验时...
React-Native 宝藏库大揭秘：精选开源项目与实战代码解析
最新发布
sinner小屋
07-31 1188
React-Native Elements 是一个高度可定制的 UI 工具包，它为 React-Native 开发者提供了丰富的 UI 组件，如按钮、卡片、表单等。这些组件不仅外观现代，而且易于集成和使用，大大简化了 UI 开发过程。React-Native Elements 的设计理念是提供一个统一的 UI 层，让开发者能够快速构建出美观且功能丰富的应用界面。下面是一个简单的代码示例，展示如何使用 React-Native Elements 的自定义主题和组件。// 自定义主题Button: {
React-Native CodePush Android 热更新
he_wen_jian的专栏
06-06 434
温馨提示 本地搭建CodeServer,可以查看我另外一篇文章：https://blog.csdn.net/he_wen_jian/article/details/91415296 1：首先在测试CodePush热更新前一定不要用模拟器测试。 2：react-native run-android 手机首次加载页面后关闭Nodejs。 3：1.0.0无法更新到1.0.1，只能同一个版本...
Android-ReactNativeForAndroid热更新实现思路
08-13
React Native For Android 热更新实现思路
reactnative热更新
08-08
React Native 热更新技术详解 在移动应用开发领域，React Native（简称RN）作为一种流行的JavaScript框架，允许开发者使用JavaScript和React组件库构建原生的iOS和Android应用程序。随着技术的发展，热更新机制已经...
react_native热更新
11-09
3. 自己搭建热更新服务器：我们也可以自己搭建热更新服务器，来实现热更新。 四、Code push 的安装和添加应用 要使用 Code push，我们需要先安装 Code push，接着将其添加到我们的项目中。 1. 安装 Code push：...
Android原生项目集成React Native的方法
08-28
准备开发环境需要按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件（比如npm）。在应用中添加JS代码，首先需要在项目的根目录中运行以下命令：$ npm init、$ npm install --save react react-...
react native windows 环境搭建
06-07
遵循以上步骤，你将能够成功搭建起开发环境，并开始构建自己的 React Native 应用程序。在实际操作过程中可能会遇到各种各样的问题，但只要仔细阅读文档并耐心解决，最终都能顺利进行开发工作。
React Native集成CodePush热更新
小王的技术库
06-09 1078
作为一款以JavaScript语音为基础跨平台开发框架，React Native本身已经具备了动态更新的能力，不过官方却没有提供一套标准的动态更新方案。因为一个标准的动态更新方案，除了需要客户端具备动态更新的能力外，还需要服务器端支持资源包的管理和下发。 虽然官方没有提供标准的热更新方案，但是React Native社区却提供了搭建热更新的私服方案，比如React Native中文网的pushy和微软的CodePush。相比于pushy，我们更推荐使用CodePush来搭建热更新私服。CodePush是微软
Android-自己写的Android模块化框架主要里面使用的有模块化热更新thinker
08-13
自己写的Android模块化框架，主要里面使用的有模块化，热更新thinker，最新的Android屏幕适配以及RxJava Retrofit2.0 mvp Butterknife Picasso等x
Android-Android使用RN加载本地js
08-13
Android 使用 RN 加载本地 js
热更新
hundaxxx的博客
11-12 443
如果是android平台的话，可以直接.cs文件到本地，然后使用反射进行加载。 如果是IOS平台的话，就没有办法直接更新.cs文件了，可以使用ULua进行搞定。 IOS不能热更新，不是因为不能用反射，是因为 System.Reflection.Assembly.Load 无法使用 System.Reflection.Emit 无法使用 System.CodeDom.Compiler
ReactNative 热更新，集成CodePush
卓原的进化之旅
05-16 1013
开篇先介绍另外一种热更新方式：pushy， 这是rn中文网推荐的，phshy集成方法 CodePush简介 CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。 CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新...
Android的在线热更新方案_自实现
huye930610的博客
11-04 1787
Android的在线热更新方案_自实现 1、： 2、： 3、： 4、： 5、：
React Native v0.56.0 最新版本更新日志
...
07-05 2604
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 React Native v0.56.0 已发布，这也是属于 6 月的更新发布！ FB开发团队表示，自3月以来，超过 60 位贡献者贡献了 816 个 commit。另外，由于这个新版本有一些重要的破坏性变化需要大量的额外工作才能使其达到稳定的状态，这也是月度发布周期中跳过4月和5月的主要原因。同时官方表示，...
2021了React Native热更新怎么搞（react-native-code-push，Android，iOS）
Synaric的专栏
09-03 4133
RN的热更方案也在不断发展，目前RN中文官网上推的是pushy，然而是收费的，对于小企业就比较劝退了。另一个比较成熟的方案是react-native-code-push，本文将基于CodePush集成热更新。 关于热更新的特性，想要的ta都有 粗略阅读文档，CodePush的特性还是非常全的，涵盖一般场景能设想到的各种问题。 Q：热更支持到什么程度？ A：JS的变动，Image等组件的source引用都可以热更。遗憾的是，CodePush是bundle的更新，意味着原生代码的变动不能通过热更解决。对于小问题
Android原生集成react-native(二)-热更新
踏雪飞鸿的博客
10-28 935
使用code-push 和code-push-server 实现热更新 1.安装code-push-server: npm install code-push-server -g 2.初始化mySQL数据库: code-push-server-db init --dbhost localhost --dbuser root --dbpassword 可以通过code-push-serve...
react native 自建热更新
09-18
React Native的自建热更新功能是指开发者自行实现热更新功能，而不使用第三方提供的热更新服务。下面将简单介绍实现自建热更新的一般步骤。 首先，需要创建一个服务器来存放热更新的文件。可以使用云存储服务，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值