跳转到主要内容

开始使用

安装​

您可以通过运行以下命令安装该软件包

bash
yarn add @shopify/react-native-performance
bash
yarn add @shopify/react-native-performance

由于此软件包包含需要进行原生链接的代码，因此您必须运行 pod install

bash
npx pod-install
bash
npx pod-install

用法​

性能分析器库需要在您的应用程序的 3 个部分中进行初始化：Android 原生、iOS 原生和 TS。

Android 原生初始化 ​

将此代码片段添加到您的 Android MainApplication.java 中。确保 ReactNativePerformance.onAppStarted() 是 onCreate 中的第一行。我们希望在应用程序生命周期的早期尽可能地初始化分析器。

java
import com.shopify.reactnativeperformance.ReactNativePerformance;
// ...
@Override
public void onCreate() {
  ReactNativePerformance.onAppStarted();
  super.onCreate();
  // other stuff
}
java
import com.shopify.reactnativeperformance.ReactNativePerformance;
// ...
@Override
public void onCreate() {
  ReactNativePerformance.onAppStarted();
  super.onCreate();
  // other stuff
}

您可能还需要在应用程序生命周期的早期初始化您的错误报告服务。我们建议在错误报告服务之前初始化该库，以便将初始化后者所花费的时间包括在您的应用程序启动时间中。当然，这会使您容易遇到初始化该库导致应用程序崩溃的情况，并且不会向您的错误报告服务报告。尽管如此，onAppStarted 方法调用非常简单，我们认为可以放心地建议将其排除在错误报告器的覆盖范围之外。

iOS 原生初始化 ​

类似地，将此代码片段添加到您的 iOS AppDelegate.m 中。同样，请确保 [ReactNativePerformance onAppStarted] 是应用程序启动例程中的第一行。

objc
#import <ReactNativePerformance/ReactNativePerformance.h>
// ...
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativePerformance onAppStarted];
  // other stuff
}
objc
#import <ReactNativePerformance/ReactNativePerformance.h>
// ...
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativePerformance onAppStarted];
  // other stuff
}

TS 初始化​

将 <PerformanceProfiler/> 组件挂载到您的应用程序树的较高位置。例如

tsx
import {RenderPassReport, PerformanceProfiler} from '@shopify/react-native-performance';
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);
  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};
tsx
import {RenderPassReport, PerformanceProfiler} from '@shopify/react-native-performance';
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);
  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};