ReactNavigationPerformanceView（建立在vanilla PerformanceMeasureView之上，并增加了对React Navigation库的优化）。
安装
-
在
package.json文件中添加JavaScript库依赖项。"dependencies": { ... "@shopify/react-native-performance": "npm:@amazon-devices/shopify__react-native-performance@~2.0.0", "@shopify/react-native-performance-navigation": "npm:@amazon-devices/shopify__react-native-performance-navigation@~3.0.0" }, -
将Babel模块解析器插件添加到
package.json文件中的devDependencies部分内："devDependencies": { ... "babel-plugin-module-resolver": "~5.0.2", }, -
在
babel.config.js文件的plugin部分为@amazon-devices/shopify__react-native-performance*配置别名。plugins: [ ["module-resolver", { "alias": { "~@amazon-devices/shopify__react-native-performance(.*)": "@shopify/react-native-performance/\\1" } }] ] -
对于使用@amazon-devices/react-navigation_<X>@2.0.0库（其中<X>表示stack或native组件等特定组件）的项目，请将这些库同时包含在package.json文件的dependencies和overrides部分中。强烈建议升级到@amazon-devices/react-navigation_<X>@7.0.0，它引入了@amazon-devices/react-native-reanimated支持，以增强性能和动画。
"dependencies": { ... "@amazon-devices/react-navigation__<X>": "~2.0.0", ... }, ... "overrides": { ... "@amazon-devices/react-navigation__<X>": "~2.0.0", ... }, -
使用
npm install命令重新安装依赖项。
示例
import React, { useCallback, useContext, useState } from 'react';
import {
Button,
GestureResponderEvent,
StyleSheet,
Text,
View,
} from 'react-native';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import {
PerformanceProfiler,
RenderPassReport,
} from '@shopify/react-native-performance';
import {
ReactNavigationPerformanceView,
useProfiledNavigation,
} from '@shopify/react-native-performance-navigation';
type ReportContextState = {
saveReport: (report: RenderPassReport) => void;
findReport: (destinationScreen: string, sourceScreen?: string) => void;
};
const INITIAL_STATE = {
saveReport: () => {},
findReport: () => {},
};
const ReportContext = React.createContext<ReportContextState>(INITIAL_STATE);
const useReportContext = () => {
return useContext(ReportContext);
};
const HomeScreen = () => {
const profiledNavigation = useProfiledNavigation();
const navigateToScreenUsingPerformanceNavigation = (
uiEvent: GestureResponderEvent,
source: 'HomeScreen' | 'DestinationScreen',
destination: 'HomeScreen' | 'DestinationScreen',
) => {
profiledNavigation.navigate(
{
source: source,
uiEvent,
},
destination,
);
};
return (
<View style={styles.container}>
<Button
title="Go to DestinationScreen"
onPress={(uiEvent) =>
navigateToScreenUsingPerformanceNavigation(
uiEvent,
'HomeScreen',
'DestinationScreen',
)
}
/>
</View>
);
};
const DestinationScreen = () => {
const { findReport } = useReportContext();
const report = findReport('destinationScreen', 'HomeScreen');
return (
<ReactNavigationPerformanceView screenName="destinationScreen" interactive>
<View style={[styles.container]}>
<Text style={styles.label}>正在测量导航渲染时间</Text>
<Text style={styles.label}>
每次从"HomeScreen"导航到"DestinationScreen"后，都会
生成 新报告。
</Text>
<Text style={styles.text}>{JSON.stringify(report)}</Text>
</View>
</ReactNavigationPerformanceView>
);
};
const Stack = createStackNavigator();
export const App = () => {
const onReportPrepared = (report: RenderPassReport) => {
saveReport(report);
};
const [reports, setReports] = useState<RenderPassReport[]>([]);
const saveReport = useCallback((report: RenderPassReport) => {
setReports((prev) => {
const filtered = prev.filter(
(r) =>
r.sourceScreen !== report.sourceScreen ||
r.destinationScreen !== report.destinationScreen,
);
return [...filtered, report];
});
}, []);
const findReport = useCallback(
(destinationScreen: string, sourceScreen?: string) => {
return reports.find(
(r) =>
r.sourceScreen === sourceScreen &&
r.destinationScreen === destinationScreen,
);
},
[reports],
);
return (
<>
<ReportContext.Provider value={{ saveReport, findReport }}>
<PerformanceProfiler onReportPrepared={onReportPrepared}>
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen
name="DestinationScreen"
component={DestinationScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</PerformanceProfiler>
</ReportContext.Provider>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
label: {
fontSize: 28,
},
text: {
fontSize: 20,
marginTop: 20,
},
});
API参考
查看专门文档，了解有关此库、API参考等内容的信息。官方react-native-performance-navigation文档（仅提供英文版）。挂钩
| 挂钩 | 描述 | 平台支持 |
|---|---|---|
useProfiledNavigation | 在react-navigation的原始useProfiledNavigation上，使用包装器useNavigation挂钩将两个调用合并为一个调用。该包装器会开始分析与导航流相对应的渲染时间，并请求导航到给定的目标屏幕。 | 所有平台 |
组件
| 组件 | 描述 | 平台支持 |
|---|---|---|
ReactNavigationPerformanceView | ReactNavigationPerformanceView建立在vanilla PerformanceMeasureView上，并增加了对React Navigation库的优化。 | 所有平台 |
实现详情
用于在屏幕之间导航的渲染通道报告目前未在Vega虚拟设备上生成。 要解决此问题，请替换package.json文件中的依赖关系，如下所示。
"dependencies": {
...
"@amazon-devices/shopify__react-native-performance": "~2.0.0",
"@amazon-devices/shopify__react-native-performance-navigation": "~3.0.0"
},
支持的版本
| NPM程序包版本 | Vega SDK版本 | Vega OS版本 | React Native版本 |
|---|---|---|---|
| ~3.0.0 | 0.24及更早版本 | OS 1.2 (2101020054720)及更早版本 | 0.72 |
