Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

shopify-react-native-performance

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/shopify__react-native-performanceは、アプリのさまざまなフローでレンダリング時間を計測するためのライブラリです。

インストール
例
APIリファレンス
- コンポーネント
- フック
実装の詳細
サポートされているバージョン
関連リソース

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

クリップボードにコピーしました。

 "dependencies": {
     ...
     "@amazon-devices/react-navigation__native": "~2.0.0",
     "@amazon-devices/react-navigation__stack": "~2.0.0",
     "@shopify/react-native-performance": "npm:@amazon-devices/shopify__react-native-performance@~2.0.0"
 },

npm installコマンドを使用して、依存関係を再インストールします。

例

クリップボードにコピーしました。

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}>Render pass report:</Text>
            <Text style={styles.text}>
              {JSON.stringify(report, undefined, 4)}
            </Text>
          </>
        ) : (
          <Text style={styles.text}>No render pass report generated</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',
  },
});

APIリファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、公式ドキュメントのshopify/react-native-performance（英語のみ）を参照してください。

コンポーネント

コンポーネント	説明	対応プラットフォーム
`PerformanceProfiler`	パフォーマンス指標を収集するコンポーネントです。アプリツリーの上位にマウントする必要があります。	すべて
`PerformanceMeasureView`	ラップされた画面またはコンポーネントのパフォーマンスデータを測定するラッパーです。	すべて
`PerformanceMarker`	パフォーマンス測定の目的で、アプリケーション内の特定のポイントにマークを付けることができる、内部ユーティリティコンポーネントです。	すべて

PerformanceProfilerのプロパティ

プロパティ	説明	対応プラットフォーム
`onReportPrepared`	パフォーマンスレポートが作成されたときに呼び出されるコールバックです。パフォーマンスデータをカスタムの方法で処理するために使用できます。	すべて
`renderTimeoutMillis`	レンダリング操作がタイムアウトしたと見なすまでの待機時間をミリ秒単位で指定します。	すべて
`errorHandler`	プロファイリングプロセス中に発生したエラーを処理するコールバックです。	すべて
enabled	プロファイラーを有効または無効にするフラグです。環境や条件に基づいてプロファイリングを制御するのに役立ちます。	すべて
`useRenderTimeouts`	長いレンダリングまたは停止したレンダリングの検出に、レンダリングタイムアウトを使用するかどうかを決定します。	すべて
`logLevel`	プロファイラーのロギングレベルを設定し、プロファイラーによって生成されるログの詳細度を制御します。	すべて

PerformanceMeasureViewのプロパティ

プロパティ	説明	対応プラットフォーム
`screenName`	ラップされた画面やコンポーネントの名前または識別子です。ビュー固有のパフォーマンス指標の分類と識別に役立ちます。	すべて
`optimizeForSlowRenderComponents`	レンダリングが遅いコンポーネントに対して最適化するかどうかを示すフラグです。	すべて
`slowRenderPlaceholder`	メインコンポーネントのレンダリングに時間がかかりすぎる場合に、レンダリングするプレースホルダーコンポーネントです。	すべて
`interactive`	測定中のコンポーネントがインタラクティブかどうかを示します。	すべて
`renderPassName`	レンダリングパスの名前です。	すべて

PerformanceMarkerのプロパティ

プロパティ	説明	対応プラットフォーム
`componentInstanceId`	マークされているコンポーネントのインスタンスを示す一意の識別子です。	すべて
`renderPassName`	レンダリングパスの名前です。	すべて
`interactive`	マークされているコンポーネントがインタラクティブかどうかを示します。	すべて
`destinationScreen`	レンダリングプロセスによって導かれる宛先画面またはコンポーネントの名前です。	すべて
`style`	`PerformanceMarker`コンポーネントに適用する追加のスタイルです。	すべて
`onRenderComplete`	マークされたコンポーネントのレンダリングの完了時にトリガーされるコールバックです。	すべて

フック

フック	説明	対応プラットフォーム
`useComponentInstanceId`	内部ユーティリティフックです。`componentInstanceId`に使用できる一意の識別子を作成します。	すべて
`useErrorHandler`	エラーハンドラーコンテキストに格納されている、エラーハンドラーコールバックを返します。	すべて
`useProfilerState`	ライブラリの内部状態遷移を監視するために使用されます。本番環境では使用しないでください。	すべて
`useProfilerStateChangeListener`	`useProfilerState`で使用される内部フックです。内部状態遷移の変更に対するリスナーを登録します。	すべて
`useRenderPassReport`	最後に収集されたレンダリングパスレポートを返します。	すべて
`useResetFlow`	画面またはコンポーネントが再描画されていることを示すために使用されます。	すべて
`useStateController`	内部ユーティリティフックです。ステートコントローラーコンテキストに格納されている、ステートコントローラーを返します。	すべて

実装の詳細

useResetFlowフックは、Vegaを含むいずれのプラットフォームでも機能しません。
画面間を移動するためのレンダリングパスレポートは、現在Vega仮想デバイスでは生成されません。

サポートされているバージョン

パッケージ名	Amazon NPMライブラリのバージョン	Vega OSのビルド番号	Vega SDKバージョン	リリースノート
`@amazon-devices/shopify__react-native-performance`	2.0.1+4.1.2	`OS 1.1 (201010438050)`	0.20