Shiply ReactNative 动态化 SDK 接入指引

一、隐私安全说明

Shiply ReactNative 动态化 SDK

版本：0.3.5

更新时间：2025年6月25日

SDK介绍：为ReactNative开发框架提供动态化能力，方便开发者在线更新或修复问题

服务提供方：深圳市腾讯计算机系统有限公司

接入指引：Shiply ReactNative 动态化 SDK 接入指引

隐私保护规则：《Shiply 容器动态化 SDK 隐私保护规则》

二、SDK接入

2.1 引入shiply rn 动态化扩展包

添加RN层依赖

在项目根目录执行

npm install rn-shiply-upgrade

添加Android层依赖

在项目Android目录下的build.gradle文件中添加maven地址

allprojects {
  repositories {
    maven { url "https://tencent-tds-maven.pkg.coding.net/repository/shiply/repo" }
  }
}

添加iOS层依赖

暂时不需要额外设置

2.2 添加热更新检查与加载代码

修改RN层代码

import { Text, View, Image, Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import { HotUpdateHelper, HotUpdateButton } from 'rn-shiply-upgrade'; // 新增导入辅助类

const AppV2 = () => {
    // 初始化热更新配置（只需一次）
    HotUpdateHelper.getInstance({
        // 需要修改为业务方自己的android/ios appId和appKey
        appId: Platform.OS === 'ios' ? 'xxx1' : 'xxx2',
        appKey: Platform.OS === 'ios'
            ? 'xxxxx1'
            : 'xxxxx2',
        deviceId: '33333', // 需要修改为实际的设备id
        appVersion: DeviceInfo.getVersion(), // 应用版本号
        isDebugPackage: false,
        customParamsByJson: JSON.stringify({ age: '22', name: 'testName' }), // 自定义请求参数，按需设置
        env: 'online', // 环境类型
        shiplyResName: 'testRN', // 资源key名称，对应shiply平台上中创建的资源key
        eventLogger: ({ type, data }) => {
            console.log(`[HotUpdate] ${type}:`, data);
        }
    });

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            {/* 默认样式按钮 */}
            <HotUpdateButton />
        );
};

export default AppV2;

参考以上代码，点击按钮就会触发更新检测请求； 也可以参考HotUpdateButton中相关代码自定义请求时机和UI表现；

修改Android层代码

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override fun getJSBundleFile(): String? {
          var result: String? = null
          // 从shiply获取RN bundle路径，业务方需要将资源key修改为shiply平台中创建的资源key名称  
          result = ShiplyReactNativeUpgradeModule.getJSBundleFilePath(applicationContext as Application, "testRN") 
          Log.d(TAG, "getJSBundleFile: $result")
          return result
        }

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }
}

复写getJSBundleFile方法，从shiply获取bundle路径，业务方需要将资源key修改为shiply平台中创建的资源key名称；

tip

Shiply ReactNative 动态化 SDK native层日志打印是对接的RN框架的日志接口，可以参考以下代码将RN日志对接到业务方自己的日志系统：

    FLog.setLoggingDelegate(object : LoggingDelegate {
      private var logLevel = FLog.INFO  // 默认日志级别
      private val prefix = "TestFlog_"
      override fun setMinimumLoggingLevel(level: Int) {
        logLevel = level
      }

      override fun getMinimumLoggingLevel(): Int = logLevel

      override fun isLoggable(level: Int): Boolean = level >= logLevel


      override fun v(tag: String, msg: String) {
        log(FLog.VERBOSE, tag, msg)
      }

      override fun v(tag: String, msg: String, tr: Throwable) {
        log(FLog.VERBOSE, tag, "$msg\n${Log.getStackTraceString(tr)}")
      }

      override fun d(tag: String, msg: String) {
        log(FLog.DEBUG, tag, msg)
      }

      override fun d(tag: String, msg: String, tr: Throwable) {
        log(FLog.DEBUG, tag, "$msg\n${Log.getStackTraceString(tr)}")
      }

      override fun i(tag: String, msg: String) {
        log(FLog.INFO, tag, msg)
      }

      override fun i(tag: String, msg: String, tr: Throwable) {
        log(FLog.INFO, tag, "$msg\n${Log.getStackTraceString(tr)}")
      }

      override fun w(tag: String, msg: String) {
        log(FLog.WARN, tag, msg)
      }

      override fun w(tag: String, msg: String, tr: Throwable) {
        log(FLog.WARN, tag, "$msg\n${Log.getStackTraceString(tr)}")
      }

      override fun e(tag: String, msg: String) {
        log(FLog.ERROR, tag, msg)
      }

      override fun e(tag: String, msg: String, tr: Throwable) {
        log(FLog.ERROR, tag, "$msg\n${Log.getStackTraceString(tr)}")
      }

      override fun wtf(tag: String, msg: String) {
        Log.wtf(tag, msg)
      }

      override fun wtf(tag: String, msg: String, tr: Throwable) {
        Log.wtf(tag, msg, tr)
      }

      override fun log(priority: Int, tag: String, msg: String) {
        val newTag = prefix + tag
        when (priority) {
          FLog.VERBOSE -> Log.v(newTag, msg)
          FLog.DEBUG -> Log.d(newTag, msg)
          FLog.INFO -> Log.i(newTag, msg)
          FLog.WARN -> Log.w(newTag, msg)
          FLog.ERROR -> Log.e(newTag, msg)
          else -> Log.println(priority, newTag, msg)
        }
      }
    })

修改iOS层代码

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
import ShiplyReactNativeUpgrade

@main
class AppDelegate: RCTAppDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    self.moduleName = "ShiplyReactNativeUpgradeExample"
    self.dependencyProvider = RCTAppDependencyProvider()
    self.initialProps = [:]
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    let buildConfig = "Debug"
#else
    let buildConfig = "Release"
#endif
    
    NSLog("bundleURL called - Build Configuration: \(buildConfig)")

    // 业务方需要将资源key修改为shiply平台中创建的资源key名称  
    ShiplyReactNativeUpgradeUtil.getJSBundleFilePath("testRN");
    if let path = ShiplyReactNativeUpgradeUtil.getJSBundleFilePath("testRN") {
        NSLog("bundleURL called,path = %@ ", path);

        return URL(fileURLWithPath: path)
    }
    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
  }
}

复写bundleURL方法，从shiply获取bundle路径，业务方需要将资源key修改为shiply平台中创建的资源key名称；

tip

Shiply ReactNative 动态化 SDK native层日志打印是对接的RN框架的日志接口，可以参考以下代码将RN日志对接到业务方自己的日志系统：

  RCTSetLogThreshold(RCTLogLevelInfo);
  RCTLogFunction customLogFunction = ^(RCTLogLevel level,
                                       RCTLogSource source,
                                       NSString *fileName,
                                       NSNumber *lineNumber,
                                       NSString *message)
  {

      NSString *levelStr;
      switch (level) {
          case RCTLogLevelError: levelStr = @"🔴 ERROR"; break;
          case RCTLogLevelWarning: levelStr = @"⚠️ WARN"; break;
          default: levelStr = @"INFO"; break;
      }

      NSString *sourceStr = (source == RCTLogSourceNative) ? @"[Native]" : @"[JS]";

      NSLog(@"TestAPP_%@ %@ %@:%@ %@",
            levelStr,
            sourceStr,
            fileName,
            lineNumber,
            message);
  };
  // 设置自定义日志函数
  RCTSetLogFunction(customLogFunction);

三、打包RN动态化产物

3.1 打包Android产物

在工程的根目录输入如下命令进行打包：

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

执行后，工程根目录/bundle/androidBundle下会生成Android产物，全选androidBundle下所有文件后进行压缩，得到的zip文件将用于上传到shiply。

3.2 打包iOS产物

在工程的根目录输入如下命令进行打包：

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

执行后，工程根目录/bundle/iOSBundle下会生成iOS产物，全选iOSBundle下所有文件后进行压缩，得到的zip文件将用于上传到shiply。

四、发布RN动态化产物

获取到动态产物zip包后，即可将该zip包配置到发布平台进行发布，并由SDK自动下载安装，并在合适的时机加载生效。

发布平台的使用可参考《平台使用指引》。