首页 帮助中心 听云App React Native Bundle部署

SDK部署-React Native Bundle 方式

1、React 配置

1.安装依赖

npm install --save @tingyunapp/react-native-tingyunapp

2.配置 Transform

若 React Native 版本大于等于 0.59,在根目录的 metro.config.js 的 transformer 中添加 transformer.babelTransformerPath;

若 React Native 版本等于 0.57 或 0.58,在根目录的 rn-cli.config.js 的 transformer 中添加 transformer.babelTransformerPath , 示例如下:

若项目使用react-native bundle 打包且配置了–config参数,请在配置的js文件中添加 transformer.babelTransformerPath

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    babelTransformerPath: require.resolve('@tingyunapp/react-native-tingyunapp/src/NBSTransformer.js'),
  },
};

React Native 版本小于0.57
在项目根目录下创建rn-cli.config.js(如果没有该文件)添加如下内容:

若项目使用react-native bundle 打包且配置了–config参数,请在配置的js文件中添加getTransformModulePath

module.exports = {
  getTransformModulePath() {
    return require.resolve('@tingyunapp/react-native-tingyunapp/src/NBSTransformer.js');
  },
  getSourceExts() {
    return ['js'];
  }
}

2 、Android Native 项目配置

React Native 0.60 以下版本,SDK 桥接方法的类可能不会打包到 apk 中。你可以通过以下方法解决:

将 SDK 桥接类复制到 Android Native 项目中

将 node_modules\@tingyunapp\react-native-tingyunapp\android\src\main\java\com\tingyun\app 目录下的 RNReactNativeTingyunappModule.java 和 RNReactNativeTingyunappPackage.java 两个类复制到 Native 项目中

在定义 ReactNativeHost 对象时,添加听云 ReactPackage

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new com.tingyun.app.RNReactNativeTingyunappPackage()//添加听云 ReactPackage
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
};