集成指南

RN插件的集成有远端和本地两种方式。

• 远端集成

yarn add git+https://gitlab.bonree.com/BonreeSDK_TAPM/react-native-plugin.git

或者直接在 package.json 中的 dependencies 类库中引入插件库后，执行 npm install 或 yarn install 指令加载依赖库:

"@bonree/react-native-plugin": "git+https://gitlab.bonree.com/BonreeSDK_TAPM/react-native-plugin.git"

• 本地集成

将 @bonree整体拖进工程的node_modules路径下即可。

若iOS工程使用的是RN工程ios目录下的工程，则cd到ios路径下执行pod install集成iOS采集SDK即可。

若iOS的工程单独嵌入了移动端的SDK，则需要将RN插件目录下react-native-plugin/ios内的BonreeRNBridge.h和BonreeRNBridge.m拖入工程内，并在.m文件中修正SDK头文件的引用。

插件配置

在系统文件中配置Transformer:

若React Native版本大于等于0.72.1,在根目录的 metro.config.js 的 transformer 中添加 transformer.babelTransformerPath; 示例如下:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve(
      '@bonree/react-native-plugin/lib/bonree-transformer',
    )
  },
};

另：需要添加.babelrc.js文件

若expo架构项目，配置metro.config.js文件如下

// 原
const { getDefaultConfig,MetroConfig } = require('expo/metro-config');
const config = mergeConfig(getDefaultConfig(__dirname));
module.exports = config;

// 改如下
const { getDefaultConfig,MetroConfig } = require('expo/metro-config');
const { mergeConfig } = require('metro-config'); // 引入
// 合并配置信息
const config = mergeConfig(getDefaultConfig(__dirname),{
    transformer: {
        babelTransformerPath: require.resolve(
          '@OpenRUM/react-native-plugin/lib/OpenRUM-transformer',
        ),
    }
});
module.exports = config;

react自动执行

react 在React v17.x，React v16.14.0，React v15.7.0，React v14.0支持了jsx语法(https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).

这也影响了我们的探针的正常运行，需要添加如下importSource属性配置： ps:在项目根目录下添加babel.config.js文件（有就修改，没有就新增）

module.exports = {
  plugins: [
    [
      "@babel/plugin-transform-react-jsx",
      {
        runtime: "automatic", 
        importSource: "@bonree/react-native-plugin"
      }
    ]
  ]
}

用 babel-preset-expo:

module.exports = {
  presets: [
    ['babel-preset-expo',
      {
        jsxRuntime: 'automatic',
        jsxImportSource: '@bonree/react-native-plugin',
      },
    ],
  ],
};

用 @react-native/babel-preset:

module.exports = {
  presets: [
    ['module:@react-native/babel-preset'],
  ],
  plugins: [
      [
          '@babel/plugin-transform-react-jsx',
          {
              runtime: 'automatic',
              importSource: "@bonree/react-native-plugin"
          },
      ],
  ],
};

用 metro-react-native-babel-preset:

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset'],
  ],
  plugins: [
      [
          '@babel/plugin-transform-react-jsx',
          {
              runtime: 'automatic',
              importSource: "@bonree/react-native-plugin"
          },
      ],
  ],
};

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

若 React Native 版本等于 0.57 或 0.58，在根目录的 rn-cli.config.js 的 transformer 中添加 transformer.babelTransformerPath.

示例如下:

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

若 React Native 版本小于0.57，在根目录的 rn-cli.config.js(如果没有需创建） 的 transformer 中添加 getTransformModulePath ,示例如下：

module.exports = {
  getTransformModulePath() {
    return require.resolve('@bonree/react-native-plugin/lib/bonree-transformer');
  },
  getSourceExts() {
    return ['js'];
  }
}

注意事项: 若项目使用react-native bundle 打包且配置了–config参数，请在配置的js文件中添加getTransformModulePath 或者 transformer.babelTransformerPath 配置信息

RN插件支持自定义的配置信息，需要在项目的根目录下创建文件bonree.config.js，内容模板如下：

module.exports = {
    react: {
        /**
         * Debug Logs
         */
        debug: false,

        /**
         * Allows you to filter the instrumentation for touch events, refresh events and picker events in certain files
         * True = Will be instrumented
         */
        instrument: (filename) => {
            return true;
        },


        lifecycle: {
            /**
             * Monitor the navigation service switch. The default value is false
             */
            listenNavigation: true,

            /**
             * The data collection rules of component life cycle can be set to specify the fuzzy matching of component name
             */
            componentName: null,
        },
    }
};

react-navigation库支持

[email protected]版本

由于react-navigation@7版本的升级，导致API `onReady`不能拿到对应的state数据

export default function App() {
  return (
    <Navigation
      onStateChange={state => Bonree.reportRouterDataV7(state)}
    />
  );
}
// 或者
export default function App() {
    return (
      <NavigationContainer onStateChange={state => Bonree.reportRouterDataV7(state)}>
        {/*stack形式的引用*/}
        <StackView />

        {/*tab形式的引用*/}
        {/*<TabView/>*/}

        {/*drawer带参数*/}
        {/*<MyDrawerParam/>*/}

        {/*material top tabs带参数*/}
        {/*<TabParam/>*/}
      </NavigationContainer>
    );
}

[email protected]版本

支持react-navigation库6.x版本，需要在导航配置里为RN插件配置事件监听：

onReady={() => {Bonree.reportRouterData(navigationRef) }}
onStateChange={() => {Bonree.reportRouterData(navigationRef)}}

示例如下：

···
import { NavigationContainer ,useNavigationContainerRef } from '@react-navigation/native';
import { Bonree } from "@bonree/react-native-plugin";
··· 
···
export default function App(){
    let navigationRef = useNavigationContainerRef()
    return (
        <NavigationContainer ref={navigationRef}
            onReady={() => {Bonree.reportRouterData(navigationRef) }}
            onStateChange={() => {Bonree.reportRouterData(navigationRef)}}
        >
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="About" component={AboutScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
} 

[email protected]版本

支持react-navigation库5.x版本，需要在导航配置里为RN插件配置事件监听：

useEffect(()=>{
    Bonree.reportRouterDataV5(navigationRef)
},[]);

示例如下：

import { Bonree } from "@bonree/react-native-plugin";

export default function App(){
  const navigationRef = React.useRef(null);
  //下面代码为获取数据代码，可以做适当调整
  useEffect(()=>{
      Bonree.reportRouterDataV5(navigationRef)
  },[]);
  return (<NavigationContainer ref={navigationRef}>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>)
}

react-navigation 2.10.x版本

支持react-navigation库2.10.x版本示例如下：

import {Bonree} from "@bonree/react-native-plugin";
<AppContainer
    onNavigationStateChange={Bonree.reportRouterDataV2}
/>

//也可以利用 defaultProps
AppContainer.defaultProps={
    onNavigationStateChange:Bonree.reportRouterDataV2
}

1.5.4

兼容路由方面错误（中邮）

1.5.5

1.5.6

去掉工行引入的自定义库

1.6.0

兼容最新版本的react-native(0.74.X)及 0.72.x

react(18.x)，18+

react-navigation(6.X),7+ 邱解决

0.62-0.72老探针