集成指南

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.59，在根目录的 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库支持

react-navigation@6.x版本

支持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>
    );
}

react-navigation@5.x版本

支持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
}