文档

React Native SDK（https://docs.openreplay.com/en/rn-sdk/init/）

结论

高版本配置（ Gradle 版本7+ ）可以, openreplay后台会话大概4分钟能显示

全新创建RN项目

项目相关配置要求

// 文件 android/build.gradle
classpath("com.android.tools.build:gradle:8.3.0")
​
// 文件 android/gradle.properties
android.useAndroidX=true
android.enableJetifier=true
​
// 文件 android/gradle/wrapper/gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all.zip

会话录屏

步骤：

• 创建项目：npx @react-native-community/cli init MyOpenReplayApp
• 安装java相关： brew install openjdk@17
• 安装Xcode
• Ruby要求3.1.0以上:

1.安装rbenv：
brew install rbenv

2.运行rbenv：
rbenv init

3.如果提示 rbenv: command not found，手动添加到 ~/.zshrc：
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc

4.安装 Ruby 3.1.0 或以上
rbenv install 3.1.0
rbenv global 3.1.0

5.检查版本：
ruby -v

• 项目根目录，运行：npx pod-install 确保 CocoaPods 正确安装并处理 iOS 依赖
• 打开Xcode，

    ⚠️注意：不要打开 MyOpenReplayApp.xcodeproj，一定要用 .xcworkspace 文件！

• 运行： npx react-native start

r  - reload app(s)
d  - open Dev Menu
j  - open DevTools

• 根文件初始化openreplay

import Openreplay from '@openreplay/react-native'
​
    useEffect(() => {
        Openreplay.tracker.startSession(
            'QwzwZ6ccGivA7kLnpQye',
            {
                crashes: true,
                analytics: true,
                performances: true,
                logs: true,
                screen: true,
                debugLogs: true,
            },
            'https://api.openreplay.com/ingest'
        );
        Openreplay.tracker.setMetadata('key', 'value');
        Openreplay.tracker.setUserID('ls-0314-1912-apiopenreplaycom');
    }, []);
    
<Openreplay.ORTouchTrackingView style={styles.container}>
    <View style={styles.container}>
      <Openreplay.ORTrackedInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="Trackable input"
        numberOfLines={1}
      />
      <Openreplay.ORSanitizedView style={styles.sanitizedView}>
          <Text>Contents of this view are sanitized and invisible on the recording</Text>
      </Openreplay.ORSanitizedView>
    </View>
</Openreplay.ORTouchTrackingView>