shopify-react-native-performance

import React, {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useCallback,
  useContext,
  useState,
} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import {
  RenderPassReport,
  PerformanceMeasureView,
  PerformanceProfiler,
} from '@shopify/react-native-performance';

interface ReportContextType {
  report: RenderPassReport | undefined;
  setReport: Dispatch<SetStateAction<RenderPassReport | undefined>>;
}

const ReportContext = createContext<ReportContextType | null>(null);

interface ReportProviderProps {
  children: ReactNode;
}

const ReportProvider = ({ children }: ReportProviderProps) => {
  const [report, setReport] = useState<RenderPassReport>();

  return (
    <ReportContext.Provider value={{ report, setReport }}>
      {children}
    </ReportContext.Provider>
  );
};

const Stack = createStackNavigator();

const NavigationTree = () => {
  const { setReport } = useContext(ReportContext) as ReportContextType;

  const onReportPrepared = useCallback(
    (report: RenderPassReport) => {
      setReport(report);
    },
    [setReport],
  );

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="HomeScreen">
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

const HomeScreen = () => {
  const { report } = useContext(ReportContext) as ReportContextType;

  return (
    <PerformanceMeasureView screenName="HomeScreen" interactive>
      <View style={styles.container}>
        <Text style={styles.text}>主屏幕</Text>
        {report ? (
          <>
            <Text style={styles.text}>渲染报告:</Text>
            <Text style={styles.text}>
              {JSON.stringify(report, undefined, 4)}
            </Text>
          </>
        ) : (
          <Text style={styles.text}>未生成渲染通道报告</Text>
        )}
      </View>
    </PerformanceMeasureView>
  );
};

export const App = () => {
  return (
    <ReportProvider>
      <NavigationTree />
    </ReportProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: '500',
  },
});