Instabug-React-Native 使用教程

1. 项目介绍

Instabug-React-Native 是一个为 React Native 应用提供 in-app 反馈和 bug 报告的开源工具。用户或测试者通过简单的摇晃设备，即可报告 bug 或发送应用内反馈。该 SDK 能够捕获设备的快照，包括所有控制台日志和服务器端网络请求，便于开发者更快地调试和修复 bug。同时，它还提供可靠的崩溃报告功能，自动捕获运行环境、线程状态、重现崩溃的步骤以及网络请求日志。

2. 项目快速启动

首先，确保你已经安装了 Node.js 和 React Native 开发环境。

安装 Instabug-React-Native

在终端中，导航到你 React Native 项目的目录下，执行以下命令安装 instabug-reactnative 包：

npm install instabug-reactnative

或者，如果你更倾向于使用 Yarn：

yarn add instabug-reactnative

对于 iOS 项目，你还需要执行以下额外步骤：

cd ios
pod install
cd ..

初始化 Instabug

在你的 React 组件中，导入 Instabug 并在 constructor 或 componentWillMount 中初始化它：

import Instabug from 'instabug-reactnative';

Instabug.init({
  token: 'APP_TOKEN',
  invocationEvents: [Instabug.invocationEvent.shake]
});

请将 'APP_TOKEN' 替换为你从 Instabug 仪表板中获取的应用 token。

3. 应用案例和最佳实践

微phone 和相册库使用描述（iOS）

iOS 10 及以上版本的 App 需要在 info.plist 文件中添加麦克风和相册库的使用描述，以避免提交到 App Store 时被拒绝。

在 info.plist 文件中添加以下键，并附上解释用户为什么需要这些权限的文本：

<key>NSMicrophoneUsageDescription</key>
<string>我们的应用需要访问麦克风以便用户附加语音备忘录。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>我们的应用需要访问您的相册库以便用户附加图片。</string>

崩溃报告的源图文件上传

为了在崩溃报告中显示完整的符号化堆栈跟踪，我们需要自动生成并上传源图文件。这需要在 JavaScript 中的 Instabug.init 方法中明确添加你的应用 token。

如果你将应用 token 定义为一个常量，你可以设置一个环境变量 INSTABUG_APP_TOKEN 来替代。

网络日志

Instabug 默认启用网络日志，它会拦截所有使用 fetch 或 XMLHttpRequest 执行的请求，并将它们附加到发送到仪表板的报告中。如果你想禁用网络日志：

import { NetworkLogger } from 'instabug-reactnative';

NetworkLogger.setEnabled(false);

4. 典型生态项目

目前，Instabug-React-Native 支持以下流行的 React Native 导航库：

• react-navigation v5：在 NavigationContainer 中设置 onStateChange 为 Instabug.onStateChange
• react-native-navigation：使用 Navigation.events().registerComponentDidAppearListener(Instabug.componentDidAppearListener) 注册监听器

你也可以手动报告屏幕变化，通过以下 API：

Instabug.reportScreenChange('screenName');

如果你想禁用 Repro Steps 功能，可以通过以下 API：

Instabug.setReproStepsConfig({
  all: ReproStepsMode.disabled
});

以上就是 Instabug-React-Native 的使用教程，希望对你有所帮助。