dt-setup-react-native

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dynatrace React Native Plugin Integration Skill

Dynatrace React Native插件集成指南

Prerequisites

前提条件

Node.js 16.0+ and npm available on
```
PATH
```
An existing React Native project (v0.68+) or Expo project (v45+) with a
```
package.json
```
at the project root
```
android/
```
and
```
ios/
```
platform folders present (Expo managed workflow requires
```
npx expo prebuild
```
first)
A Dynatrace environment with access to Experience Vitals (to obtain
```
applicationId
```
and
```
beaconUrl
```
, or to download
```
dynatrace.config.js
```
)
Console access to Experience Vitals → Mobile to configure app settings (Data Privacy, Enablement and Cost Control)
macOS with CocoaPods for iOS builds

Work through the steps below in order, interacting with the user at each decision point. Read actual project files before suggesting changes — do not assume the current state.

系统PATH中已安装Node.js 16.0+和npm
已存在的React Native项目（v0.68+）或Expo项目（v45+），项目根目录下有
```
package.json
```
文件
已存在
```
android/
```
和
```
ios/
```
平台文件夹（Expo托管工作流需先执行
```
npx expo prebuild
```
）
拥有可访问Experience Vitals的Dynatrace环境（用于获取
```
applicationId
```
和
```
beaconUrl
```
，或下载
```
dynatrace.config.js
```
）
拥有Experience Vitals → Mobile的控制台访问权限，用于配置应用设置（数据隐私、功能启用与成本控制）
用于iOS构建的macOS系统，且已安装CocoaPods

请按以下步骤依次操作，在每个决策点与用户交互。在建议修改前，请先读取实际项目文件——不要假设当前状态。

Step 1 — Check for existing

dynatrace.config.js

步骤1 — 检查是否存在

dynatrace.config.js

Before asking the user anything, check whether

dynatrace.config.js

exists at the project root.

File exists: Read it, show the
```
applicationId
```
and
```
beaconUrl
```
, and confirm they match the target environment. If correct, run the
```
userOptIn
```
check below and skip to Step 3 (config is already present — Step 2 is not needed).
File does not exist: Proceed to Step 2.

userOptIn
check:

Inspect the file for

userOptIn

(Android block) and

DTXUserOptIn

(iOS block).

Present on both platforms: Trust the value as-is. If
```
true
```
, flag Step 9. If
```
false
```
, skip Step 9.
Absent from either platform: Ask the user: "Do you have User Opt-In mode enabled or disabled?" (If unsure: Experience Vitals → Mobile → [Your App] → Settings → Data Privacy.) Add the missing value to the relevant platform(s), then flag Step 9 if the final value is
```
true
```
.

在询问用户任何问题之前，先检查项目根目录下是否存在

dynatrace.config.js

。

文件已存在：读取该文件，展示
```
applicationId
```
和
```
beaconUrl
```
，并确认它们与目标环境匹配。如果正确，执行下方的
```
userOptIn
```
检查，然后跳至步骤3（配置已存在，无需执行步骤2）。
文件不存在：继续执行步骤2。

userOptIn
检查：

检查文件中的

userOptIn

（Android区块）和

DTXUserOptIn

（iOS区块）。

两个平台均已配置：保留现有值。如果值为
```
true
```
，标记步骤9；如果为
```
false
```
，跳过步骤9。
任一平台未配置：询问用户：“您是否启用了用户选择加入模式？”（若不确定，请前往Experience Vitals → Mobile → [您的应用] → 设置 → 数据隐私查看。）为未配置的平台添加缺失的值，若最终值为
```
true
```
，则标记步骤9。

Step 2 — Obtain

dynatrace.config.js

(only if Step 1 found no file)

步骤2 — 获取

dynatrace.config.js

（仅当步骤1未找到文件时执行）

Ask the user which approach they prefer:

Option A — Download from console (recommended):

Open their Dynatrace environment
Navigate to: Experience Vitals → New Frontend → Mobile
Enter app name and choose React Native as the platform
On the Select capability and settings screen, configure monitoring features (crash reporting, user action monitoring, etc.)
Download
```
dynatrace.config.js
```
and place it at the project root (same level as
```
package.json
```
)

Once the file is in place, apply the

userOptIn

check from Step 1 and flag Step 9 if needed.

Option B — Provide credentials manually: Read

references/config-js.md

for the full template and conditional blocks. Collect all required values from the user before creating any files, then apply the

userOptIn

check and flag Step 9 if needed.

询问用户偏好哪种方式：

选项A — 从控制台下载（推荐）：

打开您的Dynatrace环境
导航至：Experience Vitals → New Frontend → Mobile
输入应用名称，选择React Native作为平台
在选择功能和设置界面，配置监控功能（崩溃报告、用户行为监控等）
下载
```
dynatrace.config.js
```
并放置在项目根目录（与
```
package.json
```
同级）

文件放置完成后，执行步骤1中的

userOptIn

检查，若需要则标记步骤9。

选项B — 手动提供凭据： 读取

references/config-js.md

获取完整模板和条件区块。在创建任何文件前，先向用户收集所有必填值，然后执行

userOptIn

检查，若需要则标记步骤9。

Step 3 — Install the plugin

步骤3 — 安装插件

Read

package.json

first.

Not present: Run:

bash

npm install @dynatrace/react-native-plugin

Already under
dependencies
: No change needed.
Under
devDependencies
: Remove it and run
```
npm install @dynatrace/react-native-plugin
```
. The plugin is required at runtime including in release builds.

Note:

npm install

alphabetically sorts the

dependencies

object in

package.json

. Existing entries may appear reordered after this step — this is expected npm behavior, not an error.

先读取

package.json

文件。

未安装插件：执行以下命令：

bash

npm install @dynatrace/react-native-plugin

已在
dependencies
中：无需修改。
在
devDependencies
中：将其移除，然后执行
```
npm install @dynatrace/react-native-plugin
```
。该插件在运行时（包括发布构建）是必需的。

注意：

npm install

会按字母顺序对

package.json

中的

dependencies

对象排序。执行此步骤后，现有条目可能会重新排序——这是npm的正常行为，并非错误。

Step 4 — Install iOS pods (macOS only)

步骤4 — 安装iOS pods（仅macOS）

If on macOS and targeting iOS, run:

bash

cd ios && pod install && cd ..

Confirm success before continuing. CocoaPods must be installed (

gem install cocoapods

if missing).

如果使用macOS且目标平台为iOS，执行以下命令：

bash

cd ios && pod install && cd ..

确认执行成功后再继续。必须已安装CocoaPods（若未安装，执行

gem install cocoapods

）。

Step 5 — Register Babel plugin in

babel.config.js

步骤5 — 在

babel.config.js

中注册Babel插件

Read

babel.config.js

. Append

BabelPluginDynatrace

to the

plugins

array, just before

react-native-reanimated/plugin

if that plugin is present (reanimated must always be last):

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // ... existing plugins ...
    '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    // react-native-reanimated/plugin goes here if present — must stay last
  ],
};

If the plugins array already contains

'@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace'

: skip this step.

If
```
useLegacyJscodeshift: true
```
is set in
```
dynatrace.config.js
```
: the Babel plugin is already applied internally — skip this step.
If the project already configures
```
metro.config.js
```
with
```
babelTransformerPath: '@dynatrace/react-native-plugin/lib/dynatrace-transformer'
```
: that is the legacy Metro transformer approach — auto-instrumentation is already handled; skip this step and Step 6.

Common mistakes to flag and correct:

Placing the plugin in
```
presets
```
instead of
```
plugins
```
Placing
```
BabelPluginDynatrace
```
after
```
react-native-reanimated/plugin
```
— reanimated must always be the absolute last plugin

读取

babel.config.js

文件。将

BabelPluginDynatrace

添加到

plugins

数组中，放在
react-native-reanimated/plugin
之前（如果该插件存在，reanimated必须始终位于最后）：

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // ... 现有插件 ...
    '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    // react-native-reanimated/plugin 若存在则放在此处——必须位于最后
  ],
};

如果

plugins

数组已包含

'@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace'

：跳过此步骤。

如果
```
dynatrace.config.js
```
中设置了
```
useLegacyJscodeshift: true
```
：Babel插件已在内部应用——跳过此步骤。
如果项目已在
```
metro.config.js
```
中配置
```
babelTransformerPath: '@dynatrace/react-native-plugin/lib/dynatrace-transformer'
```
：这是旧版Metro转换器方式——自动插桩已处理；跳过此步骤和步骤6。

需要标记并纠正的常见错误：

将插件放在
```
presets
```
而非
```
plugins
```
中
将
```
BabelPluginDynatrace
```
放在
```
react-native-reanimated/plugin
```
之后——reanimated必须始终是最后一个插件

Step 6 — Register JSX runtime in

babel.config.js

步骤6 — 在

babel.config.js

中注册JSX运行时

Read

babel.config.js

and determine which preset the project uses — this controls how the JSX runtime is registered.

读取

babel.config.js

并确定项目使用的预设——这将控制JSX运行时的注册方式。

Expo (

babel-preset-expo

)

Expo（

babel-preset-expo

）

babel-preset-expo

appears in

presets

, set

jsxImportSource

on the preset itself. Do not add a separate

@babel/plugin-transform-react-jsx

plugin — Expo's preset already owns the JSX transform, and stacking a second JSX plugin over it breaks the instrumentation.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', {
        jsxRuntime: 'automatic',
        jsxImportSource: '@dynatrace/react-native-plugin',
      }],
    ],
    plugins: [
      '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
      'react-native-reanimated/plugin',  // stays last
    ],
  };
};

babel-preset-expo

already has

jsxImportSource: '@dynatrace/react-native-plugin'

: no change needed.

If a different

jsxImportSource

is already set: replace it with

'@dynatrace/react-native-plugin'

Remove any existing
```
@babel/plugin-transform-react-jsx
```
plugin entry — it must not coexist with the preset-level
```
jsxImportSource
```
on
```
babel-preset-expo
```
.

如果

presets

中包含

babel-preset-expo

，在预设本身中设置

jsxImportSource

。不要添加单独的

@babel/plugin-transform-react-jsx

插件——Expo的预设已包含JSX转换，叠加第二个JSX插件会破坏插桩。

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', {
        jsxRuntime: 'automatic',
        jsxImportSource: '@dynatrace/react-native-plugin',
      }],
    ],
    plugins: [
      '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
      'react-native-reanimated/plugin',  // 保持最后
    ],
  };
};

如果

babel-preset-expo

已设置

jsxImportSource: '@dynatrace/react-native-plugin'

：无需修改。

如果已设置其他

jsxImportSource

：将其替换为

'@dynatrace/react-native-plugin'

。

移除任何现有的
```
@babel/plugin-transform-react-jsx
```
插件条目——它不能与
```
babel-preset-expo
```
的预设级
```
jsxImportSource
```
共存。

Bare React Native (

@react-native/babel-preset

metro-react-native-babel-preset

)

原生React Native（

@react-native/babel-preset

或

metro-react-native-babel-preset

）

For metro 0.72.0+ (React Native 0.71+), add

@babel/plugin-transform-react-jsx

with the Dynatrace

importSource

before

BabelPluginDynatrace

in the plugins array:

module.exports = {
  presets: [
    ['module:@react-native/babel-preset', { unstable_transformProfile: 'hermes-stable' }],
  ],
  plugins: [
    ['@babel/plugin-transform-react-jsx', {
      runtime: 'automatic',
      importSource: '@dynatrace/react-native-plugin',
    }],
    '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    'react-native-reanimated/plugin',  // stays last
  ],
};

The required plugin order is:

```
@babel/plugin-transform-react-jsx
```
(JSX runtime — first)
```
BabelPluginDynatrace
```
(auto-instrumentation — before reanimated)
```
react-native-reanimated/plugin
```
(must be absolutely last)

If the project already has

@babel/plugin-transform-react-jsx

with

importSource: '@dynatrace/react-native-plugin'

: no change needed.

If a different

importSource

is set: replace it with

'@dynatrace/react-native-plugin'

After any Babel change, reset Metro cache on next build:

bash

npx react-native start --reset-cache

对于metro 0.72.0+（React Native 0.71+），在

plugins

数组中添加带有Dynatrace

importSource

的

@babel/plugin-transform-react-jsx

，放在

BabelPluginDynatrace

之前：

module.exports = {
  presets: [
    ['module:@react-native/babel-preset', { unstable_transformProfile: 'hermes-stable' }],
  ],
  plugins: [
    ['@babel/plugin-transform-react-jsx', {
      runtime: 'automatic',
      importSource: '@dynatrace/react-native-plugin',
    }],
    '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    'react-native-reanimated/plugin',  // 保持最后
  ],
};

插件的必需顺序：

```
@babel/plugin-transform-react-jsx
```
（JSX运行时——第一个）
```
BabelPluginDynatrace
```
（自动插桩——在reanimated之前）
```
react-native-reanimated/plugin
```
（必须是最后一个）

如果项目已配置

@babel/plugin-transform-react-jsx

且

importSource: '@dynatrace/react-native-plugin'

：无需修改。

如果已设置其他

importSource

：将其替换为

'@dynatrace/react-native-plugin'

。

修改Babel配置后，下次构建时重置Metro缓存：

bash

npx react-native start --reset-cache

Step 7 — Run

npx instrumentDynatrace

步骤7 — 运行

npx instrumentDynatrace

bash

npx instrumentDynatrace

This reads

dynatrace.config.js

and automatically configures Android

build.gradle

and iOS

Info.plist

. Must be re-run whenever
dynatrace.config.js
changes.

Common mistakes to flag and correct:

Skipping this step after changing
```
dynatrace.config.js
```
Using
```
react-native instrument-dynatrace
```
— same effect but deprecated for RN 0.70+
Manual edits to
```
build.gradle
```
or
```
Info.plist
```
— not needed, the script handles it

android/

and

ios/

folders exist but automatic plist discovery fails, pass explicit paths:

bash

npx instrumentDynatrace plist=ios/YourApp/Info.plist

Expo only: If

android/

and

ios/

folders do not yet exist, run

npx expo prebuild

first, then re-run

npx instrumentDynatrace

bash

npx instrumentDynatrace

该命令会读取

dynatrace.config.js

并自动配置Android的

build.gradle

和iOS的

Info.plist

。每当
dynatrace.config.js
更改时，必须重新运行此命令。

需要标记并纠正的常见错误：

修改
```
dynatrace.config.js
```
后跳过此步骤
使用
```
react-native instrument-dynatrace
```
——效果相同，但在RN 0.70+中已弃用
手动编辑
```
build.gradle
```
或
```
Info.plist
```
——无需手动操作，脚本会处理

如果

android/

和

ios/

文件夹存在但自动发现plist失败，传递明确路径：

bash

npx instrumentDynatrace plist=ios/YourApp/Info.plist

仅Expo项目： 如果

android/

和

ios/

文件夹尚未存在，先运行

npx expo prebuild

，然后重新运行

npx instrumentDynatrace

。

Step 7a — Manual SDK startup (only if

autoStart: false

)

步骤7a — 手动启动SDK（仅当

autoStart: false

时）

Skip this step if
autoStart
is
true
or absent in
dynatrace.config.js
— the SDK starts automatically.

Check

dynatrace.config.js

for

autoStart: false

in the

react

block. If present, the SDK will not start on its own and no data will be collected until

Dynatrace.start()

is called explicitly.

Add the startup call at the top level of the app entry file (for example

App.tsx

index.js

). Any logic that depends on the SDK being ready goes after the

await

import { Dynatrace, ConfigurationBuilder } from '@dynatrace/react-native-plugin';

await Dynatrace.start(
  new ConfigurationBuilder('<BEACON_URL>', '<APPLICATION_ID>').buildConfiguration()
);
// SDK is initialized — place any SDK-dependent logic here

Replace

<BEACON_URL>

and

<APPLICATION_ID>

with the exact same values from

dynatrace.config.js

— they must match or the SDK will report to the wrong environment.

Important: Even with

autoStart: false

, the

beaconUrl

and

applicationId

must still be present in

dynatrace.config.js

(used by

npx instrumentDynatrace

to configure the native files). The values passed to

ConfigurationBuilder

at runtime take effect — values in the config file are ignored when manual startup is used.

Tradeoff: Manual startup causes the SDK to miss the native application start event and any interactions that happen before

start()

is called. Use

autoStart: true

(the default) unless runtime credential injection is a hard requirement.

如果
dynatrace.config.js
中
autoStart
为
true
或未设置，跳过此步骤——SDK会自动启动。

检查

dynatrace.config.js

中

react

区块是否设置了

autoStart: false

。如果存在，SDK不会自行启动，直到显式调用

Dynatrace.start()

才会收集数据。

在应用入口文件（例如

App.tsx

或

index.js

）的顶层添加启动调用。任何依赖SDK就绪的逻辑都要放在

await

之后：

import { Dynatrace, ConfigurationBuilder } from '@dynatrace/react-native-plugin';

await Dynatrace.start(
  new ConfigurationBuilder('<BEACON_URL>', '<APPLICATION_ID>').buildConfiguration()
);
// SDK已初始化——此处放置依赖SDK的逻辑

将

<BEACON_URL>

和

<APPLICATION_ID>

替换为

dynatrace.config.js

中的完全相同的值——必须匹配，否则SDK会向错误的环境上报数据。

重要提示： 即使设置了

autoStart: false

，

dynatrace.config.js

中仍必须包含

beaconUrl

和

applicationId

（供

npx instrumentDynatrace

用于配置原生文件）。运行时传递给

ConfigurationBuilder

的值会生效——使用手动启动时，配置文件中的值会被忽略。

权衡： 手动启动会导致SDK错过原生应用启动事件以及

start()

调用之前的所有交互。除非必须在运行时注入凭据，否则请使用默认的

autoStart: true

。

Step 8 — Enable navigation tracking

步骤8 — 启用导航追踪

Check

dynatrace.config.js

for the

react.navigation

block and check

package.json

for

@react-navigation/native

@react-navigation/native

is present and

navigation.enabled

is not set to

true

, add it:

module.exports = {
  react: {
    navigation: {
      enabled: true,  // requires @react-navigation/native v5–v7
    },
    // ...
  },
  // ...
};

Then re-run

npx instrumentDynatrace

What this does: When enabled, the plugin hooks into React Navigation's

NavigationContainer

and detects route changes automatically. Each navigation event is reported to Dynatrace as a view change, with the current route represented as a URL-style path (e.g.,

/Home

/Home/Details

). This populates the screen timeline in Dynatrace user sessions and associates all events with the currently active screen. This setting is enabled by default in the plugin's own config template.

@react-navigation/native

is not present: inform the user that automatic view tracking requires

@react-navigation/native

. They can use

Dynatrace.startView("ScreenName")

for manual view tracking instead.

检查

dynatrace.config.js

中的

react.navigation

区块，以及

package.json

中是否存在

@react-navigation/native

。

如果存在

@react-navigation/native

且

navigation.enabled

未设置为

true

，添加该配置：

module.exports = {
  react: {
    navigation: {
      enabled: true,  // 需要@react-navigation/native v5–v7
    },
    // ...
  },
  // ...
};

然后重新运行

npx instrumentDynatrace

。

功能说明： 启用后，插件会挂钩到React Navigation的

NavigationContainer

并自动检测路由变化。每个导航事件都会作为视图变化上报给Dynatrace，当前路由以URL风格的路径表示（例如

/Home

、

/Home/Details

）。这会在Dynatrace用户会话中填充屏幕时间线，并将所有事件与当前活动屏幕关联。插件的默认配置模板中已启用此设置。

如果不存在

@react-navigation/native

：告知用户自动视图追踪需要

@react-navigation/native

。他们可以使用

Dynatrace.startView("ScreenName")

进行手动视图追踪。

Step 9 — Privacy options call (only if

userOptIn: true

)

步骤9 — 隐私选项调用（仅当

userOptIn: true

时）

Skip this step if
userOptIn
was not set to
true
during Steps 1 or 2.

Read

references/user-opt-in.md

for the full guidance on

DataCollectionLevel

crashReportingOptedIn

, and placement options. Ask the user the questions defined there, then apply the call to the relevant file.

如果步骤1或步骤2中
userOptIn
未设置为
true
，跳过此步骤。

读取

references/user-opt-in.md

获取关于

DataCollectionLevel

、

crashReportingOptedIn

和放置选项的完整指南。询问用户该文档中定义的问题，然后将调用添加到相关文件中。

Step 10 — Post-setup summary

步骤10 — 设置后总结

Confirm to the user what is active:

Enabled by default (when

userOptIn

false

or absent):

✅ Crash reporting
✅ User action tracking (Touchables, Buttons, Pressable, Switch)
✅ Network monitoring
✅ Error handler
✅ Auto-start

When
userOptIn: true
, all data collection — including crash reporting — is gated on the
applyUserPrivacyOptions(...)
call.

Configured during this setup:

Privacy mode: [userOptIn: true — consent call added / opt-out (SDK default)]
Navigation tracking: [react.navigation.enabled: true / manual via Dynatrace.startView()]

向用户确认已启用的功能：

默认启用（当

userOptIn

为

false

或未设置时）：

✅ 崩溃报告
✅ 用户行为追踪（Touchables、Buttons、Pressable、Switch）
✅ 网络监控
✅ 错误处理器
✅ 自动启动

当
userOptIn: true
时，所有数据收集——包括崩溃报告——都受
applyUserPrivacyOptions(...)
调用的限制。

本次设置中配置的内容：

隐私模式：[userOptIn: true — 已添加同意调用 / 选择退出（SDK默认）]
导航追踪：[react.navigation.enabled: true / 通过Dynatrace.startView()手动追踪]

Step 11 — Verification

步骤11 — 验证

Read

references/verification.md

and show the user the verification checklist. If no data appears after 5 minutes, work through the troubleshooting steps in that file.

读取

references/verification.md

并向用户展示验证清单。如果5分钟后仍未出现数据，请按照该文件中的故障排除步骤操作。

Reference Files

参考文件

```
references/config-js.md
```
— Full
```
dynatrace.config.js
```
template with Grail and userOptIn conditional blocks

references/user-opt-in.md

—

applyUserPrivacyOptions

guidance,

DataCollectionLevel

options, placement options

```
references/verification.md
```
— Post-setup verification checklist and troubleshooting

```
references/config-js.md
```
— 完整的
```
dynatrace.config.js
```
模板，包含Grail和userOptIn条件区块

references/user-opt-in.md

—

applyUserPrivacyOptions

指南、

DataCollectionLevel

选项、放置选项

```
references/verification.md
```
— 设置后验证清单和故障排除

External References

外部参考

@dynatrace/react-native-plugin on npm — package changelog, API docs, and latest version
Dynatrace React Native Installation Docs — official setup guide

npm上的@dynatrace/react-native-plugin — 包更新日志、API文档和最新版本
Dynatrace React Native安装文档 — 官方设置指南",

dt-setup-react-native

Original

Translation

Dynatrace React Native Plugin Integration Skill

Dynatrace React Native插件集成指南

Prerequisites

前提条件

Step 1 — Check for existing
`dynatrace.config.js`

步骤1 — 检查是否存在
`dynatrace.config.js`

Step 2 — Obtain
`dynatrace.config.js`
(only if Step 1 found no file)

步骤2 — 获取
`dynatrace.config.js`
（仅当步骤1未找到文件时执行）

Step 3 — Install the plugin

步骤3 — 安装插件

Step 4 — Install iOS pods (macOS only)

步骤4 — 安装iOS pods（仅macOS）

Step 5 — Register Babel plugin in
`babel.config.js`

步骤5 — 在
`babel.config.js`
中注册Babel插件

Step 6 — Register JSX runtime in
`babel.config.js`

步骤6 — 在
`babel.config.js`
中注册JSX运行时

Expo (
`babel-preset-expo`
)

Expo（
`babel-preset-expo`
）

Bare React Native (
`@react-native/babel-preset`
or
`metro-react-native-babel-preset`
)

原生React Native（
`@react-native/babel-preset`
或
`metro-react-native-babel-preset`
）

Step 7 — Run
`npx instrumentDynatrace`

步骤7 — 运行
`npx instrumentDynatrace`

Step 7a — Manual SDK startup (only if
`autoStart: false`
)

步骤7a — 手动启动SDK（仅当
`autoStart: false`
时）

Step 8 — Enable navigation tracking

步骤8 — 启用导航追踪

Step 9 — Privacy options call (only if
`userOptIn: true`
)

步骤9 — 隐私选项调用（仅当
`userOptIn: true`
时）

Step 10 — Post-setup summary

步骤10 — 设置后总结

Step 11 — Verification

步骤11 — 验证

Reference Files

参考文件

External References

外部参考

dt-setup-react-native

Original

Translation

Dynatrace React Native Plugin Integration Skill

Dynatrace React Native插件集成指南

Prerequisites

前提条件

Step 1 — Check for existing dynatrace.config.js

步骤1 — 检查是否存在dynatrace.config.js

Step 2 — Obtain dynatrace.config.js (only if Step 1 found no file)

步骤2 — 获取dynatrace.config.js（仅当步骤1未找到文件时执行）

Step 3 — Install the plugin

步骤3 — 安装插件

Step 4 — Install iOS pods (macOS only)

步骤4 — 安装iOS pods（仅macOS）

Step 5 — Register Babel plugin in babel.config.js

步骤5 — 在babel.config.js中注册Babel插件

Step 6 — Register JSX runtime in babel.config.js

步骤6 — 在babel.config.js中注册JSX运行时

Expo (babel-preset-expo)

Expo（babel-preset-expo）

Bare React Native (@react-native/babel-preset or metro-react-native-babel-preset)

原生React Native（@react-native/babel-preset或metro-react-native-babel-preset）

Step 7 — Run npx instrumentDynatrace

步骤7 — 运行npx instrumentDynatrace

Step 7a — Manual SDK startup (only if autoStart: false)

步骤7a — 手动启动SDK（仅当autoStart: false时）

Step 8 — Enable navigation tracking

步骤8 — 启用导航追踪

Step 9 — Privacy options call (only if userOptIn: true)

步骤9 — 隐私选项调用（仅当userOptIn: true时）

Step 10 — Post-setup summary

步骤10 — 设置后总结

Step 11 — Verification

步骤11 — 验证

Reference Files

参考文件

External References

外部参考

Step 1 — Check for existing
`dynatrace.config.js`

步骤1 — 检查是否存在
`dynatrace.config.js`

Step 2 — Obtain
`dynatrace.config.js`
(only if Step 1 found no file)

步骤2 — 获取
`dynatrace.config.js`
（仅当步骤1未找到文件时执行）

Step 5 — Register Babel plugin in
`babel.config.js`

步骤5 — 在
`babel.config.js`
中注册Babel插件

Step 6 — Register JSX runtime in
`babel.config.js`

步骤6 — 在
`babel.config.js`
中注册JSX运行时

Expo (
`babel-preset-expo`
)

Expo（
`babel-preset-expo`
）

Bare React Native (
`@react-native/babel-preset`
or
`metro-react-native-babel-preset`
)

原生React Native（
`@react-native/babel-preset`
或
`metro-react-native-babel-preset`
）

Step 7 — Run
`npx instrumentDynatrace`

步骤7 — 运行
`npx instrumentDynatrace`

Step 7a — Manual SDK startup (only if
`autoStart: false`
)

步骤7a — 手动启动SDK（仅当
`autoStart: false`
时）

Step 9 — Privacy options call (only if
`userOptIn: true`
)

步骤9 — 隐私选项调用（仅当
`userOptIn: true`
时）