Vega Carouselを始める - Amazon Vega Docs

Carouselは、VegaアプリのUI画面に、単一行のコンテンツメタデータのタイルを実装するために使用されます。Carouselは通常、ホーム画面のグリッドで、関連商品のUIや関連コンテンツの行などを表示するために使用されます。

Vega Carouselのアップデート

ビューのリサイクルを修正しました。
Carouselがレイアウトを自動的に決定するようになったため、getItemLayoutやlayoutIdなどのレイアウトプロパティを削除しました。
プロパティのリストを拡張して、Carouselをさらにカスタマイズできるようにしました。
Carouselで現在選択されているアイテムが変更されるたびに通知する新しいコールバックプロパティを追加しました。
ライブラリが、システムバンドルではなくアプリバンドルになりました（詳細については以下のセクションを参照してください）。

アプリバンドル

このバージョンのCarouselはアプリにバンドルされているため、リリース前にnpmを更新して、最新バージョンを使用していることを確認する必要があります。アプリにバンドルされていることで、新しいCarouselの変更をいつアプリに取り込むかを、より詳細に制御できるようになります。

プロパティのグループ化

itemStyleプロパティとanimationDurationプロパティを他のプロパティとグループ化できるようになりました。例：

 <View style={[CAROUSEL_STYLE.container]}>
      <Carousel
        containerStyle={CAROUSEL_STYLE.verticalCarouselContainerStyle}
        orientation={'vertical'}
        itemStyle={{itemPadding: 20}}
        animationDuration={{itemScrollDuration: 0.2}}
        renderItem={renderItemHandler}
        getItemKey={getItemKeyHandler}
        getItem={getItem}
        getItemCount={getItemCount}
        notifyDataError={notifyDataError}
        hasPreferredFocus
        hideItemsBeforeSelection={false}
        selectionStrategy={'anchored'}
        numOffsetItems={2}
        renderedItemsCount={11}
        itemScrollDelay={0.2}
      />
    </View>

Vega Carouselのインポート

import { Carousel } from '@amazon-devices/vega-carousel';

例

水平カルーセル

この例は、フォーカス状態と画像のレンダリングを含む、基本的な水平カルーセルの実装を示しています。このコンポーネントは、アイテムの取得を管理するためにdataAdapterパターンを使用しており、押下して選択した際のアイテムに対するスケールアニメーションも含まれています。

import React, { useCallback } from 'react';
import { Image, Pressable, View } from 'react-native';
import {
  Carousel,
  CarouselRef,
  CarouselRenderInfo,
  ItemInfo,
} from '@amazon-devices/vega-carousel';
import { Ref, forwardRef, useImperativeHandle, useRef, useState } from 'react';

import { ItemType, ScrollableProps } from '../../Types';
import { CAROUSEL_STYLE } from './Style';

/**
 * HorizontalScrollableはCarouselコンポーネントのラッパーです。これは、
 * Carouselと同じ機能を維持しながら、アイテムを横方向に
 * 表示するように配置します。
 * @param data - データソース
 * @param ref - Imperativeハンドラーメソッドにアクセスするための参照
 * @returns HorizontalScrollable
 */
export const HorizontalScrollable = forwardRef(
  ({ data }: ScrollableProps, ref?: Ref<CarouselRef<any>>) => {
    const scrollableRef = useRef<CarouselRef<any>>(null);

    function ItemView({
      item,
      index,
    }: CarouselRenderInfo<ItemType>): JSX.Element {
      const [focus, setFocus] = useState<boolean>(false);
      const onFocusHandler = () => {
        setFocus(true);
      };
      const onBlurHandler = () => {
        setFocus(false);
      };

      return (
        <Pressable
          style={[
            CAROUSEL_STYLE.itemHorizontalContainer,
          ]}
          onFocus={onFocusHandler}
          onBlur={onBlurHandler}>
          <Image
            style={CAROUSEL_STYLE.imageContainer}
            source={{ uri: item.url }}
          />
        </Pressable>
      );
    }

    const renderItemhandler = ({ item, index }: CarouselRenderInfo<ItemType>) => {
      return <ItemView index={index} item={item} />;
    };

    const itemInfo: ItemInfo[] = [
      {
        view: ItemView,
        dimension: {
          width: 250,
          height: 420,
        },
      },
    ];

    useImperativeHandle(ref, () => scrollableRef.current!, []);

    const keyProviderHandler = (info: CarouselRenderInfo) =>
      `${info.index}-${info.item.url}`;

    const getItem = useCallback((index: number) => {
      console.info('getItem called for index:', index);
      if (index >= 0 && index < data.length) {
        return data[index];
      }
      return undefined;
    }, [data]);

    const getItemCount = useCallback(() => {
      const count = data.length;
      console.info('getItemCount called, returning:', count);
      return count;
    }, [data]);

    const notifyDataError = (error: any) => {
      return false; // 再試行しないでください
    };

    const onSelectionChanged = (event: any) => {
      console.info('Selection changed:', event);
    };

    const focusedItemScaleFactor = 1.1;
    const getSelectedItemOffset = (info: any) => {
      return {
        width: focusedItemScaleFactor,
        height: focusedItemScaleFactor
      };
    };

    return (
      <View style={CAROUSEL_STYLE.container}>
        <Carousel
          ref={scrollableRef}
          dataAdapter={{
            getItem,
            getItemCount,
            getItemKey: keyProviderHandler,
            notifyDataError
          }}
          renderItem={renderItemhandler}
          testID="horizontal-carousel"
          uniqueId="horizontal-carousel-unique"
          orientation={'horizontal'}
          renderedItemsCount={12}
          numOffsetItems={2}
          navigableScrollAreaMargin={100}
          hasPreferredFocus={true}
          initialStartIndex={0}
          hideItemsBeforeSelection={false}
          trapSelectionOnOrientation={false}
          containerStyle={CAROUSEL_STYLE.horizontalCarouselContainerStyle}
          itemStyle={{
            itemPadding: 20,
            itemPaddingOnSelection: 20,
            pressedItemScaleFactor: 0.9,
            selectedItemScaleFactor: focusedItemScaleFactor,
            getSelectedItemOffset: getSelectedItemOffset,
          }}
          animationDuration={{
            itemPressedDuration: 0.15,
            itemScrollDuration: 0.2,
            containerSelectionChangeDuration: 0.25
          }}
          selectionStrategy="natural"
          pinnedSelectedItemOffset="start"
          onSelectionChanged={onSelectionChanged}
          selectionBorder={{
            borderStrategy: 'outset',
          }}
        />
      </View>
    );
  },
);

垂直カルーセル

この例は、カスタム選択枠を使用して縦スクロールするカルーセルを構成する方法を示しています。この実装には、黄色のストローク効果を持つ赤いボーダースタイルが含まれており、ナビゲーション中にアイテムを固定するためにアンカー選択戦略を使用しています。

import { Image, Pressable } from 'react-native';
import {
  Carousel,
  CarouselRenderInfo,
  ItemInfo,
} from '@amazon-devices/vega-carousel';
import { useCallback, useState } from 'react';
import React from 'react';
import { ItemType, ScrollableProps } from '../../Types';
import { CAROUSEL_STYLE } from './Style';

/**
 * VerticalScrollableは、縦スクロールを可能にするCarouselコンポーネントの
 * ラッパーです。Carouselと同じ機能を維持しながら、
 * アイテムを縦方向に表示するように配置します。
 * @param data - データソース
 * @returns VerticalScrollable
 */
export const VerticalScrollable = ({ data }: ScrollableProps) => {
  function ItemView({ item, index }: CarouselRenderInfo<ItemType>): JSX.Element {
    const [focus, setFocus] = useState<boolean>(false);
    const onFocusHandler = () => {
      setFocus(true);
    };
    const onBlurHandler = () => {
      setFocus(false);
    };
    return (
      <Pressable
        style={[
          CAROUSEL_STYLE.itemVerticalContainer,
        ]}
        onFocus={onFocusHandler}
        onBlur={onBlurHandler}>
        <Image style={CAROUSEL_STYLE.imageContainer} source={{ uri: item.url }} />
      </Pressable>
    );
  }

  const renderItemhandler = ({ item, index }: CarouselRenderInfo<ItemType>) => {
    return <ItemView index={index} item={item} />;
  };

  const itemInfo: ItemInfo[] = [
    {
      view: ItemView,
      dimension: {
        width: 250,
        height: 420,
      },
    },
  ];

  const keyProviderHandler = (info: CarouselRenderInfo) =>
    `${info.index}-${info.item.url}`;

  const getItem = useCallback((index: number) => {
    console.info('getItem called for index:', index);
    if (index >= 0 && index < data.length) {
      return data[index];
    }
    return undefined;
  }, [data]);

  const getItemCount = useCallback(() => {
    const count = data.length;
    console.info('getItemCount called, returning:', count);
    return count;
  }, [data]);

  const notifyDataError = (error: any) => {
    return false; // 再試行しないでください
  };

  const onSelectionChanged = (event: any) => {
    console.info('Selection changed:', event);
  };

  const getSelectedItemOffset = (info: any) => {
    // 何もしません
    return undefined;
  };

  return (
    <Carousel
      dataAdapter={{
        getItem,
        getItemCount,
        getItemKey: keyProviderHandler,
        notifyDataError
      }}
      renderItem={renderItemhandler}
      testID="vertical-carousel"
      uniqueId="vertical-carousel-unique"
      orientation={'vertical'}
      renderedItemsCount={11}
      numOffsetItems={2}
      navigableScrollAreaMargin={0}
      hasPreferredFocus={false}
      initialStartIndex={0}
      hideItemsBeforeSelection={false}
      trapSelectionOnOrientation={false}
      containerStyle={CAROUSEL_STYLE.verticalCarouselContainerStyle}
      itemStyle={{
        itemPadding: 10,
        itemPaddingOnSelection: 20,
        pressedItemScaleFactor: 0.8,
        selectedItemScaleFactor: 1,
        getSelectedItemOffset: getSelectedItemOffset,
      }}
      animationDuration={{
        itemPressedDuration: 0.18,
        itemScrollDuration: 0.2,
        containerSelectionChangeDuration: 0.22
      }}
      selectionStrategy="anchored"
      pinnedSelectedItemOffset="start"
      onSelectionChanged={onSelectionChanged}
      selectionBorder={{
        borderStrategy: 'outset',
        borderColor: 'red',
        borderWidth: 5,
        borderRadius: 10,
        borderStrokeRadius: 5,
        borderStrokeColor: 'yellow',
        borderStrokeWidth: 2,
      }}
    />
  );
};

異種カルーセル

この例は、インデックスに応じて2つの異なるレイアウトを交互に切り替えることで、1行内に異なる種類のアイテムを表示できるCarouselの機能を示しています。偶数インデックスのアイテムは幅200ピクセルのレイアウトを使用し、奇数インデックスのアイテムは幅500ピクセルのレイアウトを使用します。これにより、柔軟なコンテンツ表示が可能であることを示しています。

import { Image, Pressable, View } from 'react-native';
import {
  Carousel,
  CarouselRenderInfo,
  ItemInfo,
} from '@amazon-devices/vega-carousel';
import { useCallback, useState } from 'react';
import React from 'react';
import { ItemType, ScrollableProps } from '../../Types';
import { CAROUSEL_STYLE } from './Style';

/**
 * HetrogeneousItemViewScrollableは、1つのスクロール可能な行の中で異なるUIアイテムを
 * 表示できるCarouselの機能を示しています。
 * @param data - データソース
 * @returns HetrogeneousItemViewScrollable
 */
export const HetrogeneousItemViewScrollable = ({ data }: ScrollableProps) => {
  function ItemViewType1({
    item,
    index,
  }: CarouselRenderInfo<ItemType>): JSX.Element {
    const [focus, setFocus] = useState<boolean>(false);

    const onFocusHandler = useCallback(() => setFocus(true), []);
    const onBlurHandler = useCallback(() => setFocus(false), []);

    return (
      <Pressable
        style={[
          CAROUSEL_STYLE.itemContainerType1,
          focus && CAROUSEL_STYLE.itemFocusContainer,
        ]}
        onFocus={onFocusHandler}
        onBlur={onBlurHandler}>
        <Image style={CAROUSEL_STYLE.imageContainer} source={{ uri: item.url }} />
      </Pressable>
    );
  }

  function ItemViewType2({
    item,
    index,
  }: CarouselRenderInfo<ItemType>): JSX.Element {
    const [focus, setFocus] = useState<boolean>(false);

    const onFocusHandler = useCallback(() => setFocus(true), []);
    const onBlurHandler = useCallback(() => setFocus(false), []);
    return (
      <Pressable
        style={[
          CAROUSEL_STYLE.itemContainerType2,
          focus && CAROUSEL_STYLE.itemFocusContainer,
        ]}
        onFocus={onFocusHandler}
        onBlur={onBlurHandler}>
        <Image
          style={CAROUSEL_STYLE.imageContainer}
          resizeMode="cover"
          source={{ uri: item.url }}
        />
      </Pressable>
    );
  }

  const renderItemhandler = ({ item, index }: CarouselRenderInfo<ItemType>) => {
    return index % 2 === 0 ? (
      <ItemViewType1 index={index} item={item} />
    ) : (
      <ItemViewType2 index={index} item={item} />
    );
  };

  const itemInfo: ItemInfo[] = [
    {
      view: ItemViewType1,
      dimension: {
        width: CAROUSEL_STYLE.itemContainerType1.width,
        height: CAROUSEL_STYLE.itemContainerType1.height,
      },
    },
    {
      view: ItemViewType2,
      dimension: {
        width: CAROUSEL_STYLE.itemContainerType2.width,
        height: CAROUSEL_STYLE.itemContainerType2.height,
      },
    },
  ];

  const keyProviderHandler = (info: CarouselRenderInfo) =>
    `${info.index}-${info.item.url}`;

  const getItem = useCallback((index: number) => {
    console.info('getItem called for index:', index);
    if (index >= 0 && index < data.length) {
      return data[index];
    }
    return undefined;
  }, [data]);

  const getItemCount = useCallback(() => {
    const count = data.length;
    console.info('getItemCount called, returning:', count);
    return count;
  }, [data]);

  const notifyDataError = (error: any) => {
    return false; // 再試行しないでください
  };

  const onSelectionChanged = (event: any) => {
    console.info('Selection changed:', event);
  };

  const selectedItemScaleFactor = 1.1;
  const getSelectedItemOffset = (info: any) => {
    return {
      width: selectedItemScaleFactor,
      height: selectedItemScaleFactor
    };
  };

  return (
    <View style={CAROUSEL_STYLE.container}>
      <Carousel
        dataAdapter={{
          getItem,
          getItemCount,
          getItemKey: keyProviderHandler,
          notifyDataError
        }}
        renderItem={renderItemhandler}
        testID="heterogeneous-carousel"
        uniqueId="heterogeneous-carousel-unique"
        orientation={'horizontal'}
        renderedItemsCount={12}
        numOffsetItems={2}
        navigableScrollAreaMargin={100}
        hasPreferredFocus={false}
        initialStartIndex={0}
        hideItemsBeforeSelection={false}
        trapSelectionOnOrientation={false}
        containerStyle={CAROUSEL_STYLE.horizontalCarouselContainerStyle}
        itemStyle={{
          itemPadding: 40,
          itemPaddingOnSelection: 40,
          pressedItemScaleFactor: 0.9,
          selectedItemScaleFactor: selectedItemScaleFactor,
          getSelectedItemOffset: getSelectedItemOffset,
        }}
        animationDuration={{
          itemPressedDuration: 0.15,
          itemScrollDuration: 0.2,
          containerSelectionChangeDuration: 0.25
        }}
        selectionStrategy="anchored"
        pinnedSelectedItemOffset="start"
        onSelectionChanged={onSelectionChanged}
        selectionBorder={{
          borderStrategy: 'inset',
          borderColor: 'white',
          borderWidth: 4,
          borderRadius: 8,
          borderStrokeRadius: 4,
          borderStrokeColor: 'black',
          borderStrokeWidth: 2,
        }}
      />
    </View>
  );
};

Style

このスタイルシートの例では、横スクロールと縦スクロールの両方の向きに対応したCarouselコンポーネントのスタイル定数を定義しています。これには、メインのカルーセル用コンテナスタイル（黒い背景のフルスクリーン）、2種類のサイズ（幅200ピクセルと500ピクセル）のアイテムコンテナ、および固定サイズの向きごとのレイアウト（横向きは高さ420ピクセル、縦向きは幅250ピクセル）があります。

import { StyleSheet } from 'react-native';

export const CAROUSEL_STYLE = StyleSheet.create({
  container: {
    backgroundColor: '#000000',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageContainer: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  itemHorizontalContainer: {
    width: 250,
    height: '100%',
  },
  itemVerticalContainer: {
    width: '100%',
    height: 420,
  },
  itemContainerType1: {
    height: 420,
    width: 200,
    justifyContent: 'center',
    alignContent: 'center',
  },
  itemContainerType2: {
    height: 420,
    width: 500,
    justifyContent: 'center',
    alignContent: 'center',
  },
  horizontalCarouselContainerStyle: {
    width: '100%',
    height: 420,
  },
  verticalCarouselContainerStyle: {
    height: '100%',
    width: 250,
    justifyContent: 'center',
  },
});

カスタム型

次の例では、カルーセルのアイテムやスクロール可能なラッパーコンポーネントのプロパティを定義するために使用できるカスタム型を示しています。

ItemType：個々のカルーセルアイテムの構造を表すカスタムデータ型。プロパティ：url (string)プロパティは、カルーセルアイテムに表示される画像のURLです。url (string)プロパティは、カルーセルに渡されるアイテム、、およびScrollablePropsを定義します。
export type ItemType = { url: string; };
ScrollableProps：スクロール可能なカルーセルラッパーコンポーネントのプロパティインターフェイス。プロパティ：data (ItemType[])プロパティは、カルーセルにレンダリングされるアイテムオブジェクトの配列です。data (ItemType[])プロパティは、Horizontal、Vertical、Heterogeneousのスクロール可能なラッパーコンポーネントにおいて、プロパティの型安全性を確保するために使用されます。これにより、これらのコンポーネントに渡されるデータが想定される構造と一致することが保証されます。
export type ScrollableProps = { data: ItemType[]; };

機能

データアダプター

Vega Carouselは、さまざまなコールバック関数を含むdataAdapterを提供できるようにすることで、より柔軟なカスタマイズをサポートしています。詳細については、Carouselアイテムデータアダプターのコールバック関数のセクションを参照してください。 Carouselアイテム情報を含むdataという配列があると仮定すると、次の例に示すようにdataAdapter関数を実装できます。

const getItem = useCallback((index: number) => {
    if (index >= 0 && index < data.length) {
        return data[index];
    }
    return undefined;
}, [data]);

const getItemCount = useCallback(() => {
    return data.length;
}, [data]);

const getItemKey = (info: CarouselRenderInfo) =>
   `${info.url} ${info.item.index}`

const notifyDataError = (error: any) => {
    return false; // 再試行しないでください
};

<Carousel
  dataAdapter={{
    getItem,
    getItemCount,
    getItemKey: getItemKeyHandler,
    notifyDataError
  }}
  itemStyle={{itemPadding: 20}}
 />

選択戦略

SelectionStrategyプロパティは、D-padを使用してリスト内を移動したときに、リストがどのようにスクロールし、アイテムを再配置するかを制御します。

Anchored

anchoredスタイルでは、選択したアイテムは最初のアイテムの位置に固定されたままになります。スクロールすると、選択したアイテムがその位置に固定されたままになるように、アイテムが再配置されます。複数の正方形が一列に並び、1つの正方形に黒い境界線が表示されているスクリーンショット。画像には、水平方向を指す矢印でスクロール方向が示されています。

複数の正方形が一列に並び、1つの正方形に黒い境界線が表示されているスクリーンショット。画像には、水平方向を指す矢印でスクロール方向が示されています。

natural

naturalスタイルでは、選択したアイテムはリストの最初または最後に達するまでカルーセルの向きの方向に移動します。同様のスクロール方向のグラフィックを表示するスクリーンショットですが、行が3つあり、各行で黒い境界線の付いた正方形の位置が異なります。画像には、右にスクロールする場合のように、行ごとにスクロール方向に進むようすが示されています。

同様のスクロール方向のグラフィックを表示するスクリーンショットですが、行が3つあり、各行で黒い境界線の付いた正方形の位置が異なります。画像には、右にスクロールする場合のように、行ごとにスクロール方向に進むようすが示されています。

Pinned

pinnedスタイルでは、スクロール中に選択したアイテムを指定の位置にピン留めして、アイテムが大きくなるようにスクロールします。ユーザーがリストの最初または最後に近づくと、スクロール動作はスムーズにnaturalな流れに変わります。オプションのpinnedSelectedItemOffsetプロパティを使用すると、SelectionStrategyがpinnedの場合の、選択したアイテムのピンの位置を定義できます。 pinnedSelectedItemOffsetプロパティは、選択したアイテムがCarouselのビューポートのどこに固定（ピン留め）されるかを決定します。この位置は次の2つの方法で指定できます。

ビューポートのサイズのパーセンテージ（0～100%）：
- 垂直カルーセルの場合：高さのパーセンテージ
- 水平カルーセルの場合：幅のパーセンテージ
プリセット値：
- 開始（0%と等しい）
- 中央（50%と等しい）
- 終了（100%と等しい）

水平モードでは、右から左に記述する言語を除き、左端から測定されます。

可変スクロール速度

Carouselコンポーネントには、複数のAnimationDurationPropsを通じてスクロール速度を制御する新しい機能が導入されています。FlatlistやFlashlistなどの既存のコンポーネントとは異なり、この機能は柔軟性に優れているため、スクロール操作を細かく調整できます。 itemPressedDurationプロパティは、Carouselアイテムを押したときのアニメーション時間を制御します。itemScrollDurationプロパティは、Carouselの各アイテムにスクロールする際に使用されるアニメーション時間を制御します。containerSelectionChangeDurationプロパティは、選択したCarouselコンテナを変更するときのアニメーション時間を制御します。

選択境界線

Carouselコンポーネントは、選択時にUIアイテムの周囲に境界線を表示することをサポートしています。境界線のスタイルを設定したり、選択したアイテムのコンテンツと境界線の描画方法を選択したりできます。selectionBorderプロパティを定義することで境界線を有効にできます。選択範囲の境界線のデフォルトのプロパティを次の例に示します。

{
   borderStrategy: 'outset',
   borderColor: 'white',
   borderWidth: 8,
   borderRadius: 8,
   borderStrokeWidth: 3,
   borderStrokeRadius: 4,
   borderStrokeColor: 'black',
}

Vega Carouselは、borderStrategyプロパティをサポートしています。このプロパティは次の2種類の戦略をサポートしています。

outset - アイテムの元の境界の外側に境界線が描画されるため、アイテムのコンテンツサイズは同一のままですが、アイテム全体のサイズは大きくなります。
inset - アイテムの境界内にアイテムのコンテンツ上に境界線が描画されるため、アイテムのコンテンツサイズは同一のままですが、アイテムのコンテンツの一部は境界線によってトリミングされます。アイテム全体のサイズは変わりません。

プロパティ

プロパティ	型	デフォルト	必須	詳細
`dataAdapter`	-	`TRUE`	Carouselがアイテムにアクセスするために呼び出す4つのユーザー定義コールバック関数（`getItem`、`getItemCount`、`getItemKey`、`notifyDataError`）への参照が含まれています。コールバックの詳細については、Carouselアイテムデータアダプターのコールバック関数を参照してください。
`renderItem`	`(info: CarouselRenderInfo) => React.ReactElement`	null	`TRUE`	カルーセルアイテムをレンダリングするユーザー定義メソッドへの参照。
`testID`	string	undefined	`FALSE`	エンドツーエンドのテストでこのカルーセルを特定するために使用される一意の識別子。
`uniqueId`	string	undefined	`FALSE`	カルーセルとそのアイテムをいつリサイクルするかを決定するために使用される、このカルーセルの任意かつ一意の識別子。通常、垂直カルーセル内の水平カルーセル（入れ子のカルーセルなど）で使用されます。
`orientation`	horizontal、vertical	horizontal	`FALSE`	カルーセルでアイテムをレンダリングする方向とレイアウトを指定します。
`renderedItemsCount`	number	8	`FALSE`	パフォーマンスを最適化するためにカルーセルからリサイクルするときに、特定の時間にレンダリングされるアイテムの数。
`numOffsetItems`	number	2	`FALSE`	アイテムコンポーネントを末尾までリサイクルする前に、カルーセルの上部または左側に保持するアイテムの数。
`navigableScrollAreaMargin`	number	0	`FALSE`	カルーセルの向きに沿った方向で、ナビゲーション可能なコンテンツ領域の両側に設けられるマージンのスペース（解像度に依存しないピクセル単位）（例：横向きのカルーセルでは左右、縦向きのカルーセルでは上下）。
`hasPreferredFocus`	boolean	`FALSE`	`FALSE`	このコンポーネントがレンダリング時に自動的にフォーカスを受け取るかどうかを決定します。
`initialStartIndex`	number	0	`FALSE`	選択するカルーセル内の最初のアイテムのインデックスを指定します。
`hideItemsBeforeSelection`	boolean	`FALSE`	`FALSE`	選択したアイテムの前にあるアイテムを非表示にするかどうかを決定します。
`trapSelectionOnOrientation`	boolean	`FALSE`	`FALSE`	このフラグにより、方向に沿ってカルーセルの外側にある最も近いコンポーネントに選択が進まないようになります。カルーセルが横向きで、ユーザーが先頭のアイテムにいる状態で後方へ移動しようとした場合、または最後のアイテムにいる状態で前方へ移動しようとした場合、このフラグは選択がカルーセル外へ移動するのを防ぎます。
`containerStyle`	undefined	`FALSE`	カルーセルコンテナに適用されるスタイル。
`itemStyle`	`CarouselItemStyleProps`	-	`FALSE`	カルーセルアイテムに適用されるスタイル。
`animationDuration`	`AnimationDurationProps`	-	`FALSE`	カルーセルとそのアイテムに関連するさまざまなアニメーションの所要時間。詳細については、アニメーション時間のプロパティのセクションを参照してください。
`selectionStrategy`	`anchored`, `natural`, `pinned`	`anchored`	`FALSE`	D-padキーが押されたときに、選択したアイテムがカルーセル内でどのように移動するかを指定します。`anchored` - 向きに沿ってどちらの方向にスクロールしても、選択されたアイテムが初期アイテムの位置に固定されたままになるようにします。`natural` - 選択されたアイテムが、リストのいずれかの端に到達するまで、カルーセルの向きに沿って移動するようにします。`pinned` - 選択した項目がリストの最初と最後での自然なスクロール動作に従うようにします。アイテムは、残りのスクロール中に`pinnedSelectedItemOffset`プロップで定義された特定の位置に固定されます。
`pinnedSelectedItemOffset`	パーセンテージ開始、中央、終了	0%	`FALSE`	この値は、カルーセルの先端からの相対位置として、選択されたアイテムが固定される位置を決定します。
`onSelectionChanged`	`(event: CarouselSelectionChangeEvent) => void`	undefined	`FALSE`	リスト内の現在の選択アイテムが変更されるたびに呼び出される関数（カルーセル自体が選択または非選択になった場合には呼び出されません）。
`selectionBorder`	`SelectionBorderProps`	undefined	`FALSE`	設定すると、選択されたアイテムの周囲にスタイル設定可能な境界線が表示されます。`selectionBorder`プロパティのすべてのスタイル関連のプロパティは、この機能が有効な場合に、選択されたアイテムを囲む境界線の見た目を定義します。
`ref`	undefined	`FALSE`	設定すると、`ScrollTo`や`EnableDPad`などのコンポーネントのメソッドへの参照が提供され、参照のcurrentプロパティを使用してそれらを呼び出すことができます。

選択範囲の境界線のプロパティ

プロパティ	型	デフォルト	必須	詳細
`borderStrategy`	inset、outset	outset	`FALSE`	選択したアイテムの内容と境界線の描画方法を指定します。
`borderWidth`	number	8	`FALSE`	選択したアイテムの周囲の境界線の太さです。
`borderColor`	string	white	`FALSE`	選択したアイテムの周囲の境界線の色です。
`borderRadius`	number	8	`FALSE`	角を丸くするためのボーダーの角の半径を決定します。
`borderStrokeWidth`	number	3	`FALSE`	境界線とアイテムの内容を区切るアウトラインストロークの太さです。
`borderStrokeRadius`	number	4	`FALSE`	境界線とアイテムの内容を区切るアウトラインストロークの角の半径を定義します。
`borderStrokeColor`	string	black	`FALSE`	選択範囲の境界線のアウトラインの色です。

アニメーション時間のプロパティ

プロパティ	型	デフォルト	必須	詳細
`itemPressedDuration`	number	0.15	`FALSE`	アイテムを押したときに使用される時間（秒単位）。
`itemScrollDuration`	number	0.2	`FALSE`	各アイテムをスクロールするときに使用される時間（秒単位）。
`containerSelectionChangeDuration`	number	`itemPressedDuration`	`FALSE`	選択されたコンテナを変更するときに使用される時間（秒単位）。

Carouselアイテムのスタイルプロパティ

プロパティ	型	デフォルト	必須	詳細
`itemPadding`	number	20	`FALSE`	カルーセルの向きに沿った隣接するアイテム間の間隔（ピクセル単位）。
`itemPaddingOnSelection`	number	itemPadding	`FALSE`	カルーセルが選択されているときの、カルーセルの向きに沿った隣接するアイテム間の間隔（ピクセル単位）。
`pressedItemScaleFactor`	number	0.8	`FALSE`	ユーザーがアイテムを押したときに適用されるスケール倍率。
`selectedItemScaleFactor`	number	1	`FALSE`	アイテムが選択されたときに適用されるスケール倍率。この値が`1.0`の場合、ユーザーがリストをスクロールしている間、選択されたアイテムにはスケーリングが行われないことを意味します。
`getSelectedItemOffset`	`(info: CarouselRenderInfo) => ShiftFactor`	undefined	`FALSE`	アイテムの現在の位置を基準として適用されるオフセット値を取得します。

Carouselアイテムデータアダプターのコールバック関数

プロパティ	型	デフォルト	必須	詳細
`getItem`	`(index: number) => ItemT`	undefined	`TRUE`	インデックスを受け取り、アイテムのデータオブジェクトを返します。返されたオブジェクトは、他のデータアクセス関数を呼び出してアイテムに関する情報を取得します。
`getItemCount`	`() => number;`	-	`TRUE`	リストの項目数を返します。
`getItemKey`	`(info: CarouselRenderInfo) => KeyT`	undefined	`TRUE`	データとインデックスに基づいて各アイテムに一意のキーを提供します。
`notifyDataError`	`(error: CarouselDataError) => boolean;`	-	`TRUE`	リストで項目を使用できない場合に、リストコンポーネントによって呼び出されます。

Carouselのメソッド

Carouselコンポーネントは、ナビゲーション体験をプログラムで制御するためのメソッドを提供します。以下のメソッドには、現在のコンポーネントのインスタンスをrefプロパティに渡すことでアクセスできます。

プロパティ	型	デフォルト	必須	詳細
`scrollTo`	`(index: number, animated : boolean) : void;`	-	`FALSE`	Carouselで、指定されたインデックスのアイテムにスクロールします。
`scrollToKey`	`(key: Key, animated: boolean) : void;`	-	`FALSE`	Carousel内で、特定の一意のキーに対応するアイテムまでスクロールするためのメソッド。
`enableDpad`	`(enable: boolean) : void;`	-	`FALSE`	Carouselで、HWキーイベントをサポートします。
`notifyDataChange`	-	-

トラブルシューティング

垂直スクロールは設定された高さでのみ機能する

垂直スクロール（特にナチュラルスクロール）の場合、containerStyleを高さの固定値で設定する必要があります。

​Vega Carouselのアップデート

​アプリバンドル

​プロパティのグループ化

​Vega Carouselのインポート

​例

​水平カルーセル

​垂直カルーセル

​異種カルーセル

​Style

​カスタム型

​機能

​データアダプター

​選択戦略

​Anchored

​natural

​Pinned

​可変スクロール速度

​選択境界線

​プロパティ

​選択範囲の境界線のプロパティ

​アニメーション時間のプロパティ

​Carouselアイテムのスタイルプロパティ

​Carouselアイテムデータアダプターのコールバック関数

​Carouselのメソッド

​トラブルシューティング

​垂直スクロールは設定された高さでのみ機能する