SeekBar - Amazon Vega Docs

SeekBarコンポーネントは、メディアナビゲーション機能を備えた対話型の進行状況コントロールです。基本的な進行状況バーを拡張し、TVメディアプレーヤーでよく使用される高度な再生制御機能を提供します。

使用シナリオ

SeekBarコンポーネントは、次のようなメディアナビゲーション機能を必要とするアプリに最適です。

ビデオ／オーディオプレーヤー
タイムラインのスクラブ
コンテンツのプレビューシステム
進行状況の追跡インターフェイス
対話型のメディアナビゲーション

このコンポーネントはプロパティを通じたカスタマイズが可能で、一貫性のある直感的なユーザーエクスペリエンスを維持しながら、固有のユースケースに合わせて動作と外観をカスタマイズできます。

ユーザーエクスペリエンス

コアプロパティ

currentValue

必須コンテンツの進行状況を表す現在の位置の値。

<SeekBar currentValue={300} totalValue={1200} />

型 number 0からtotalValueまでの値でなければなりません（両端の値を含む）。

totalValue

必須シークバーの最大値。合計時間または範囲を表します。

<SeekBar currentValue={0} totalValue={300} />

型 number

step

D-Padナビゲーションの使用時に増加または減少させる増減分量の値。正の値にすることも、負の値にすることもできます。

<SeekBar step={1} currentValue={0} totalValue={120} />

型 number デフォルト 10

対話制御プロパティ

disabled

すべてのユーザー操作とそのリモコンイベントを有効または無効にします。

<SeekBar disabled={true} currentValue={0} totalValue={1200} />

型 boolean\ デフォルト false

disabledWhenNotFocused

trueの場合、シークバーにフォーカスがないときのユーザー操作を無効にします。このプロパティは、フォーカス管理が不可欠なTVインターフェイスにとって重要であり、フォーカス管理をアプリコードで手動で行うのではなく、コンポーネントに自動的に処理させる場合に最適です。

<SeekBar disabledWhenNotFocused={true} currentValue={0} totalValue={1200} />

型 boolean\ デフォルト false

disableThumbnail

サムネイル画像のプレビュー機能を有効または無効にします。サムネイル画像を表示するには、thumbnailImageSourceプロパティを使用します。

<SeekBar disableThumbnail={true} currentValue={0} totalValue={1200} />

型 boolean\ デフォルト false

trapFocus

SeekBarコンポーネントのフォーカスナビゲーション動作を制御します。

<SeekBar trapFocus={true} currentValue={0} totalValue={1200} />

型 boolean\ デフォルト false 有効にすると、SeekBar内から左右方向へのD-Padによるフォーカスナビゲーションをトラップします。SeekBarの上または下にあるコントロールへの上下方向のナビゲーションは引き続き機能します。

PartialDisablingConfiguration

どの特定のユーザー操作を無効にするかを制御します。

<SeekBar
  partialDisablingConfiguration={{
    skipBackward: true,
    skipForward: true,
    playPause: false,
  }}
  currentValue={0}
  totalValue={1200}
/>

型 PartialDisablingConfiguration（型定義Typesセクションを参照）このプロパティを指定すると、グローバルのdisabledとdisabledWhenNotFocusedの設定がオーバーライドされます。このプロパティは、特定のボタンだけを無効にする場合に便利です。たとえば、シーク動作（D-Padのrightとleft）を維持したまま、skipForward >>またはskipBackward <<を無効にしたり、カスタム処理のためにデフォルトの動作を削除したりできます。指定できるアクション：

playPause
skipBackward
skipForward
left
right
select
back

PartialDisablingConfigurationオブジェクトを指定するとき、各アクションのデフォルト値はすべてfalseに設定されます。注：backボタンを無効にした場合、影響を受けるのはSeekBar内の操作だけで、外部ナビゲーションやコンポーネント外で行われるその他の操作には影響しません。

コールバックプロパティ

onValueChange

スライド中につまみの値が変更されたときに呼び出されるコールバック。

<SeekBar
  onValueChange={(value) => console.log("新しい値：", value)}
  currentValue={0}
  totalValue={1200}
/>

型 (value: number) => void

onSlidingStart

スライド操作が開始されたときに呼び出されるコールバック。D-Padでは、最初に左ボタンまたは右ボタンが押されたとき（キーダウン）にコールバックがトリガーされます。

<SeekBar
  onSlidingStart={() => console.log("スライドが開始されました")}
  currentValue={0}
  totalValue={1200}
/>

型: () => void

onSlidingEnd

スライド操作が終了したときに呼び出されるコールバック。D-Padナビゲーションでは、左ボタンまたは右ボタンが解放されたとき（キーアップ）にトリガーされます。

<SeekBar
  onSlidingEnd={() => console.log("スライドが終了しました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void | undefined

onRewindPress

ユーザーが早戻しアクションをトリガーしたときに呼び出されるコールバック。デフォルトでは、このボタンを押すと、コンテンツを早戻しする長押し操作がシミュレートされます。 RCUの早戻しボタン（<<）では、解放時（キーアップ）にトリガーされます。

<SeekBar
  onRewindPress={() => console.log("早戻しが押されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void 関連プロパティ：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

onFastForwardPress

ユーザーが早送りアクションをトリガーしたときに呼び出されるコールバック。デフォルトでは、このボタンを押すと、コンテンツを早送りする長押し操作がシミュレートされます。 RCUの早送りボタン（>>）では、解放時（キーアップ）にトリガーされます。

<SeekBar
  onFastForwardPress={() => console.log("早送りが押されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void 関連プロパティ：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

onPress

ユーザーがリモコンの選択ボタンを押したときに呼び出されるコールバック。

<SeekBar
  onPress={(thumbValue) => console.log("押されました。位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

型 (seekBarThumbValue: number) => void

onPlayPause

ユーザーがリモコンの再生／一時停止ボタンを押したときに呼び出されるコールバック。

<SeekBar
  onPlayPause={(thumbValue) => console.log("再生／一時停止が押されました。位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

型 (seekBarThumbValue: number) => void

onFocus

シークバーがフォーカスを受け取ったときに呼び出されるコールバック。

<SeekBar
  onFocus={() => console.log("SeekBarにフォーカスが設定されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

onBlur

シークバーがフォーカスを失ったときに呼び出されるコールバック。

<SeekBar
  onBlur={() => console.log("SeekBarからフォーカスが失われました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

onSeekInteractionChange

D-Padによるシーク操作中に呼び出されるコールバック。イベントオブジェクトには、シーク方向を示すdirectionプロパティが含まれています。

'forward'：右方向のD-Padナビゲーションによるシーク（最初の押下時）
'rewind'：左方向のD-Padナビゲーションによるシーク（最初の押下時）
'fast_forward'：右方向の長押しのD-Padナビゲーション
'fast_rewind'：左方向の長押しのD-Padナビゲーション
null：シーク操作が終了したとき（ユーザーがシーク後にD-Padを離したとき）に送信されます

<SeekBar
  onSeekInteractionChange={(event) => {
    switch(event.direction) {
      case 'forward':
        console.log('早送りを開始します');
        break;
      case 'rewind':
        console.log('早戻しを開始します');
        break;
      case 'fast_forward':
        console.log('早送りしています');
        break;
      case 'fast_rewind':
        console.log('早戻ししています');
        break;
      case null:
        console.log('シーク操作が終了しました');
        break;
    }
  }}
  currentValue={currentPosition}
  totalValue={totalDuration}
  longPressDelay={300}
/>

型 (event: InteractionEventPayload) => void

イベントシーケンス

onSeekInteractionChangeコールバックは、D-Padの操作中に特定の順序で呼び出されます。 D-Padの右方向の例

最初の押下時（キーダウン）：event.direction = 'forward'
長押しした場合（longPressDelayの後）：event.direction = 'fast_forward'
解放時（キーアップ）：event.direction = null

D-Padの左方向の例

最初の押下時（キーダウン）：event.direction = 'rewind'
長押しした場合（longPressDelayの後）：event.direction = 'fast_rewind'
解放時（キーアップ）：event.direction = null

完全なイベントフロー

長押し操作での完全なシーケンスは次のようになります。

['forward' or 'rewind'] → ['fast_forward' or 'fast_rewind'] → [null]

短い押下（クイックタップ）でのシーケンスは次のようになります。

['forward' or 'rewind'] → [null]

視覚的なカスタマイズプロパティ

markers

シークバーに表示するマーカーの配列。次の3種類のマーカーがサポートされます。

// ReactNodeマーカー - カスタムコンポーネント
<SeekBar
  markers={[
    {
      position: 200,
      node: () => (
        <Text style={{color: 'white', marginTop: 20}}>説明</Text>
      ),
    },
    {
      position: 30,
      node: (
        <View style={{width: 15, height: 15, backgroundColor: 'red'}} />
      ),
    },
  ]}
  currentValue={0}
  totalValue={1200}
/>

// ポイントマーカー - バーを区切る色付きのポイント（通常は広告に使用）
<SeekBar
  markers={[
    { position: 30, pointColor: '#FF0000' },
    { position: 60, pointColor: '#00FF00' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// セグメントマーカー - バーを複数のセグメントに分割
<SeekBar
  markers={[
    { position: 30, type: 'break' },
    { position: 60, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// ポイントマーカーとセグメントマーカーの組み合わせ
<SeekBar
  markers={[
    { position: 20, pointColor: 'red' },
    { position: 40, type: 'break' },
    { position: 120, pointColor: 'red' },
    { position: 190, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

型 ReactNodeMarker[] | BreakMarker[] マーカーの種類

ReactNodeマーカー：複雑な視覚要素を表すカスタムReactコンポーネント。
ポイントマーカー：シークバーをセグメントに区切る色付きのポイント。通常は広告マーカーに使用されます。
セグメントマーカー：バーを複数の異なるセグメントに分割するブレークマーカー。

制限事項

ReactNodeマーカーをポイントマーカーやセグメントマーカーと組み合わせることはできません。
ポイントマーカーとセグメントマーカーは併用できます。
ポイントマーカーの間には少なくとも3%の間隔が必要です。
ポイントマーカーを配置できる位置は、SeekBarの合計幅の97%までです。

例1 ポイントマーカー広告の位置を示すポイントマーカーが表示されたシークバーのスクリーンショット。

例2 セグメントマーカービデオセグメントマーカーが表示されたシークバーのスクリーンショット。この例では、「First impressions」、「Interior and exterior」、「Mechanical impressions」という3つのラベルが付いています。

ビデオセグメントマーカーが表示されたシークバーのスクリーンショット。この例では、「First impressions」、「Interior and exterior」、「Mechanical impressions」という3つのラベルが付いています。

displayAboveThumb

シークバーのつまみの上にレンダリングするカスタムコンテンツ。レンダリング関数またはReactノードを使用できます。レンダリング関数は、{ mode, stepValue, multiplier, focused }の各プロパティを受け取ります。

// 静的なコンテンツ
<SeekBar
    displayAboveThumb={
      <View
        style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
        <Text style={{color: 'white'}}>シークしています...</Text>
      </View>
    }
    currentValue={0}
    totalValue={1200}
/>

// 動的なコンテンツ
<SeekBar
  displayAboveThumb={({ mode, stepValue, multiplier }) => (
    <View
      style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
      <Text style={{color: 'white'}}>
        {`${mode} `}
        {stepValue * multiplier}s
      </Text>
    </View>
  )}
  currentValue={0}
  totalValue={1200}
/>

型 DisplayAboveThumbType | React.ReactNode（型定義Typesセクションを参照）

displayBelowThumb

シークバーのつまみの下にレンダリングするカスタムコンテンツ。レンダリング関数またはReactノードを使用できます。

<SeekBar
  displayBelowThumb={<Text>Live</Text>}
  currentValue={0}
  totalValue={1200}
/>

型 (() => React.ReactNode) | React.ReactNode

thumbIcon

つまみのアイコンを表すカスタムコンポーネント。レンダリング関数またはReactノードを使用できます。レンダリング関数は{ focused }プロパティを受け取ります。

// 静的なアイコン
<SeekBar
  thumbIcon={<View style={{ width: 20, height: 20, backgroundColor: 'yellow', borderRadius: 10 }} />}
  currentValue={0}
  totalValue={1200}
/>

// 動的なアイコン
<SeekBar
  disabledWhenNotFocused={true}
  thumbIcon={({ focused }) => (
    <View style={{
      width: focused ? 24 : 20,
      height: focused ? 24 : 20,
      backgroundColor: focused ? 'yellow' : 'gray',
      borderRadius: 12
    }} />
  )}
  currentValue={0}
  totalValue={1200}
/>

型 ((props: ThumbIconProps) => React.ReactNode) | React.ReactNode 注：focusedコールバック引数を受け取る動的なアイコンを使用する場合は、適切なフォーカス動作のためにdisabledWhenNotFocused={true}を設定してください。

currentValueIndicatorColor

進行状況インジケーターの完了済み部分の色。静的な色を使用するか、フォーカス状態に基づいて色を返す関数を使用できます。

<SeekBar
  currentValueIndicatorColor="#FF0000"
  currentValue={0}
  totalValue={1200}
/>

// フォーカスに基づく動的な色
<SeekBar
  disabledWhenNotFocused
  currentValueIndicatorColor={(isFocused) => isFocused ? '#FF0000' : '#888888'}
  currentValue={0}
  totalValue={1200}
/>

型 ColorValue | ((isFocused: boolean) => ColorValue)

barTrackColor

スライダーの未完了部分の色。

<SeekBar barTrackColor="#626262" currentValue={0} totalValue={1200} />

型 ColorValue

segmentColors

セグメントのカラー構成。

<SeekBar
  segmentColors={{
    0: { baseColor: "lightgreen", seekColor: "limegreen", progressedColor: "green", },
    1: { baseColor: "pink", seekColor: "brown", progressedColor: "red" },
  }}
  markers={[
    { position: 200, type: 'point', pointColor: 'red' },
    { position: 400, type: 'break' },
  ]}
  currentValue={0}
  totalValue={1200}
/>

型 SegmentColorsConfig

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 操作が行われていないときの基本色
    seekColor?: ColorValue; // シークしている部分の色
    progressedColor?: ColorValue; // 進行した部分の色
  };
}

セグメントの色を構成するオブジェクト。特定のセグメントをインデックスで指定してカスタマイズできます。任意のセグメントに色を指定できます。必ずしも順番どおりに指定する必要はなく、カスタムの色が不要なセグメントはスキップできます。注：アニメーションが有効な場合、segmentColorsのseekColorは適用されません。ブレークマーカーがない場合、バーにセグメントの色は適用されません。

使用例

黄色いセグメントの色

  const segmentColors: SegmentColorsConfig = {
    2: {
      progressedColor: '#ffff00',
      seekColor: '#797926',
      baseColor: '#2e2e00',
    },
  };

別々のセグメントに黄色、暗い黄色、濃いグレーの色を適用した例のスクリーンショット。

赤いセグメントの色

  const segmentColors: SegmentColorsConfig = {
    0: {
      progressedColor: '#ff0000',
      seekColor: '#811e1e',
      baseColor: '#432f2f',
    },
    1: {
      baseColor: '#727272',
    },
  };

別々のセグメントラインに赤、暗い赤、濃いグレーの色を適用した例のスクリーンショット。

スタイルプロパティ

barStyle

スライダーバーのスタイルオーバーライド。

<SeekBar
  barStyle={{ height: 8, borderRadius: 4 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

currentValueIndicatorStyle

進行状況インジケーターのスタイルオーバーライド。

<SeekBar
  currentValueIndicatorStyle={{ backgroundColor: "#FF0000" }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

timeShiftIndicatorStyle

タイムシフトインジケーターのスタイルオーバーライド。

<SeekBar
  timeShiftIndicatorStyle={{ backgroundColor: "#00FF00", opacity: 0.7 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

サムネイルプロパティ

thumbnailStyle

サムネイルコンテナのスタイルオーバーライド。

<SeekBar
  thumbnailStyle={{ borderRadius: 8, borderWidth: 2 }}
  currentValue={0}
  totalValue={1200}
/>

サムネイルスタイルとして、縦長のサムネイルに軽いシャドウ効果のあるオレンジ色の境界線を適用した例のスクリーンショット。

型 StyleProp<ViewStyle>

thumbnailImageSource

サムネイルプレビューの画像ソース。動的なソースを表すレンダリングプロパティを指定できます。

// 静的なソース
<SeekBar
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 動的なソース
<SeekBar
  thumbnailImageSource={(thumbValue) => ({ uri: `https://example.com/thumb_${thumbValue}.jpg` })}
  currentValue={0}
  totalValue={1200}
/>

型 ((thumbValue: number) => ImageSourcePropType) | ImageSourcePropType

thumbnailImageStyle

サムネイル画像のスタイルオーバーライド。

<SeekBar
  thumbnailImageStyle={{ width: 120, height: 80 }}
  currentValue={0}
  totalValue={1200}
/>

サムネイルのスタイルとして、シャドウ効果のある太いグレーの境界線を適用した例のスクリーンショット。

型 StyleProp<ImageStyle>

thumbnailImageResizeMode

サムネイル画像のサイズ変更モード。

<SeekBar
  thumbnailImageResizeMode="contain"
  thumbnailImageSource={{ uri: "https://example.com/thumbnail.jpg" }}
  currentValue={0}
  totalValue={1200}
/>

型 ImageResizeMode\ デフォルト "cover"

thumbnailLabel

サムネイルに表示するラベル。動的なコンテンツを表すレンダリングプロパティを指定できます。

// 静的なラベル
<SeekBar
  thumbnailLabel="Preview"
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 動的なラベル
<SeekBar
  thumbnailLabel={thumbValue => `${thumbValue} sec`}
  currentValue={0}
  totalValue={1200}
/>

タイムスタンプを示すラベルの付いたサムネイルのスクリーンショット。26:13と表示されています。

型 ((thumbValue: number) => string) | string

thumbnailLabelTextStyle

サムネイルラベルテキストのスタイルオーバーライド。

<SeekBar
  thumbnailLabelTextStyle={{ color: "white", fontSize: 14 }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<TextStyle>

thumbnailLabelContainerStyle

サムネイルラベルコンテナのスタイルオーバーライド。

<SeekBar
  thumbnailLabelContainerStyle={{
    backgroundColor: "rgba(0,0,0,0.7)",
    padding: 4,
  }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

背景のスタイルとして、角の丸いオレンジ色のバーが適用されたラベルのスクリーンショット。

型 StyleProp<ViewStyle>

操作タイミングのプロパティ

longPressIntervalDuration

D-Padの長押しアクションの間隔の長さ（ミリ秒）。方向キーを押している間、どのくらいの頻度でシークアクションを更新するかを制御します。デフォルトでは、リモコンから送信されるイベントの頻度と一致します。このデフォルト値のままにしておくことをお勧めします。

<SeekBar longPressIntervalDuration={400} currentValue={0} totalValue={1200} />

型 number\ デフォルト 200 例1 長押し時間：200 例2 長押し時間：400

longPressDelay

長押しアクションがトリガーされるまでの時間（ミリ秒）。D-Pad入力では、ユーザーが左方向キーまたは右方向キーを押し続けると長押しがトリガーされます。

<SeekBar longPressDelay={500} currentValue={0} totalValue={1200} />

型 number\ デフォルト 250 例1 長押し遅延：200 例2 長押し遅延：3000

keyDownThrottleDelay

キーダウンイベントをスロットリングするための遅延時間。キーがすばやく押されたときに、イベント処理が過剰に発生するのを防ぐために役立ちます。

<SeekBar keyDownThrottleDelay={100} currentValue={0} totalValue={1200} />

型 number\ デフォルト 0

animationDuration

enableAnimationsがtrueの場合のアニメーションの長さ（ミリ秒）。つまみと進行状況の遷移にかかる時間を制御します。長押し操作と早送りまたは早戻し操作のアニメーションが自然に感じられるように、longPressIntervalDurationとanimationDurationの両方に同じ値を設定することをお勧めします。enableAnimationsがfalseの場合は効果はありません。

<SeekBar
  animationDuration={200}
  enableAnimations={true}
  currentValue={0}
  totalValue={1200}
/>

型 number\ デフォルト 200

シーク動作のプロパティ

maxStepValue

長押し中に段階的にシークを加速する場合の最大ステップ値。加速中にシークのステップがどこまで大きくなるかを制限します。

<SeekBar
  maxStepValue={50}
  currentValue={0}
  totalValue={3000}
  enableLongPressAcceleration
/>

型 number\ デフォルト 160

stepMultiplierFactor

段階的に加速するシークのステップの乗算係数。加速中にどのくらいの速さでシーク速度を上げるかを決定します。この係数がstep値に乗算されます。enableLongPressAccelerationまたはenableSkipForwardBackwardAccelerationが有効な場合にのみ適用されます。

<SeekBar
  stepMultiplierFactor={2}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

型 number\ デフォルト 1 例

stepMultiplierFactor={1}：一定の加速 - 1x → 2x → 3x → 4x, ..
stepMultiplierFactor={2}：高速な加速 - 時間とともに速度が2倍になります。1x → 2x → 4x → 8x, ..
stepMultiplierFactor={3}：高速な加速 - 時間とともに速度が3倍になります。1x → 3x → 6x → 12x, ..

stepMultiplierFactorInterval

ステップ乗数を増加させる時間間隔（ミリ秒）。D-Padの左方向または右方向の長押しによる加速中に、どのくらいの頻度でシーク速度を上げるかを制御します。速度の上昇率はstepMultiplierFactorによって処理されます。

<SeekBar
  stepMultiplierFactorInterval={1500}
  stepMultiplierFactor={1}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

型 number\ デフォルト 1000

lowerSeekLimit

シークバーの範囲内のシーク可能な最小値。この値より前の位置にシークすることを防ぎます。

<SeekBar lowerSeekLimit={300} currentValue={0} totalValue={1200} />

型 number\ デフォルト 0

upperSeekLimit

シークバーの範囲内のシーク可能な最大値。この値より後の位置にシークすることを防ぎます。

<SeekBar upperSeekLimit={600} currentValue={0} totalValue={1200} />

型 number\ デフォルト totalValue

enableLongPressAcceleration

長押し操作中の段階的な加速を有効にします。有効な場合、stepMultiplierFactorとstepMultiplierFactorIntervalの設定に基づいて、ステップ乗数が時間とともに増加します（1倍、2倍、3倍、4倍など）。step値には現在の乗数が乗算されます。これにより、左方向または右方向のキーまたはボタンを押し続けたときにシーク速度が上がります。

<SeekBar
  enableLongPressAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

型 boolean\ デフォルト false

enableSkipForwardBackwardAcceleration

早送りまたは早戻し操作中の段階的な加速を有効にします。有効な場合、早送り（>>）ボタンまたは早戻し（<<）ボタンを連続して押すと、stepMultiplierFactorの設定に基づいてステップ乗数が増加します（1倍、2倍、3倍、4倍、5倍など）。step値には現在の乗数が乗算されます。

<SeekBar
  enableSkipForwardBackwardAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

型 boolean\ デフォルト false

enableAnimations

シークバーのつまみと進行の動きのアニメーションを有効または無効にします。 trueの場合、シークバーは位置の変更をスムーズにアニメーション化し、timeShiftIndicatorStyleプロパティは適用されません。falseの場合、位置は即座に変更され、すべての視覚要素がレンダリングされます。

<SeekBar enableAnimations={true} currentValue={0} totalValue={1200} />

型 boolean\ デフォルト false

型定義

PartialDisablingConfiguration

interface PartialDisablingConfiguration {
  back?: boolean; // 戻るアクションを無効にする
  playPause?: boolean; // 再生／一時停止アクションを無効にする
  skipBackward?: boolean; // 早戻しアクションを無効にする
  skipForward?: boolean; // 早送りアクションを無効にする
  right?: boolean; // 右方向アクションを無効にする
  left?: boolean; // 左方向アクションを無効にする
  select?: boolean; // 選択アクションを無効にする
}

InteractionEventPayload

type InteractionEventPayload = {
  direction: "forward" | "rewind" | "fast_forward" | "fast_rewind" | null;
};

DisplayAboveThumbProps

type DisplayAboveThumbProps = {
  mode: SeekMode; // 現在のシークモード
  stepValue: number; // シークの増分のステップ値
  multiplier: number; // 加速シークの現在の乗算係数
  focused: boolean; // シークバーにフォーカスがあるかどうか
};

SegmentColorsConfig

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 操作が行われていないときの基本色
    seekColor?: ColorValue; // シークしている部分の色
    progressedColor?: ColorValue; // 進行した部分の色
  };
}

ThumbIconProps

type ThumbIconProps = {
  focused: boolean; // シークバーにフォーカスがあるかどうか
};

SeekMode

type SeekMode =
  | "forward" // 通常の早送り
  | "idle_forward" // 早送り中の状態だがアクティブにはシークしていない
  | "rewind" // 通常の早戻し
  | "idle_rewind" // 早戻し中の状態だがアクティブにはシークしていない
  | "fast_forward" // 加速早送り
  | "fast_rewind" // 加速早戻し
  | undefined;

用語集

以下のリストに、このドキュメントで使用される重要な用語を示します。 つまみ - 現在の値（currentValue）を設定するためにユーザーが使用できるSeekBarの対話型要素。デフォルトでは、つまみはSeekBarのcurrentValueの位置に配置されます。ユーザーがつまみを操作すると、それに応じてつまみの位置が変わります。 タイムシフト - つまみを使用して前後にスクラブする操作。 タイムシフトインジケーター - ユーザーがつまみを動かしたときに、currentValueと現在のつまみの位置とのギャップを表すインジケーター。 現在の値のインジケーター - SeekBarの完了済みの部分。現在の値を示します（進行状況インジケーター）。 シークサムネイル - 通常SeekBarのつまみの上に表示される、画像ベースのサムネイルコンポーネント。画像プレビューやサムネイルラベルなどのコンテンツを表示します。 マーカー - SeekBar全体に水平に配置されるカスタムのReactノードまたはビュー。マーカーの種類には、ReactNodeマーカー（カスタムコンポーネント）、ポイントマーカー（色付きのポイント）、セグメントマーカー（ブレークマーカー）の3つがあります。 ポイントマーカー - シークバーをセグメントに分ける色付きのマーカー。広告マーカーによく使用されます。ReactNodeマーカーと組み合わせることはできません。 セグメントマーカー（ブレークマーカー）- バーを複数の異なるセグメントに分割するマーカー。ポイントマーカーと組み合わせることができます。 ReactNodeマーカー - 複雑な視覚要素を表すカスタムReactコンポーネント。ポイントマーカーやセグメントマーカーと組み合わせることはできません。 長押し - ユーザーがD-Padボタン（左方向または右方向）を押し続けると、加速シーク動作がトリガーされます。 早送り／早戻し - 長押し操作をシミュレートしてコンテンツをシークするリモコンボタン（>>と<<）。 D-Padナビゲーション - 左方向または右方向のD-Padコントロール。シークやつまみの移動に使用されます。 フォーカストラップ - 有効な場合、フォーカスがSeekBarから外れて左右に移動することを防ぎます。上下へのナビゲーションは可能です。加速 - 長押しまたは連続スキップ操作中に段階的に速度が上がること。stepMultiplierFactorによって制御されます。 シーク制限 - 合計範囲内のシーク可能な位置を制限する境界（lowerSeekLimitまたはupperSeekLimit）。 セグメント - ブレークマーカーによって作成されたシークバーのセクション。各セクションには、カスタマイズ可能な色と視覚のプロパティがあります。

​使用シナリオ

​ユーザーエクスペリエンス

​コアプロパティ

​currentValue

​totalValue

​step

​対話制御プロパティ

​disabled

​disabledWhenNotFocused

​disableThumbnail

​trapFocus

​PartialDisablingConfiguration

​コールバックプロパティ

​onValueChange

​onSlidingStart

​onSlidingEnd

​onRewindPress

​onFastForwardPress

​onPress

​onPlayPause

​onFocus

​onBlur

​onSeekInteractionChange

​イベントシーケンス

​完全なイベントフロー

​視覚的なカスタマイズプロパティ

​markers

​displayAboveThumb

​displayBelowThumb

​thumbIcon

​currentValueIndicatorColor

​barTrackColor

​segmentColors

​使用例

​スタイルプロパティ

​barStyle

​currentValueIndicatorStyle

​timeShiftIndicatorStyle

​サムネイルプロパティ

​thumbnailStyle

​thumbnailImageSource

​thumbnailImageStyle

​thumbnailImageResizeMode

​thumbnailLabel

​thumbnailLabelTextStyle

​thumbnailLabelContainerStyle

​操作タイミングのプロパティ

​longPressIntervalDuration

​longPressDelay

​keyDownThrottleDelay

​animationDuration

​シーク動作のプロパティ

​maxStepValue

​stepMultiplierFactor

​stepMultiplierFactorInterval

​lowerSeekLimit

​upperSeekLimit

​enableLongPressAcceleration

​enableSkipForwardBackwardAcceleration

​enableAnimations

​型定義

​PartialDisablingConfiguration

​InteractionEventPayload

​DisplayAboveThumbProps

​SegmentColorsConfig

​ThumbIconProps

​SeekMode

​用語集

使用シナリオ

ユーザーエクスペリエンス

コアプロパティ

currentValue

totalValue

step

対話制御プロパティ

disabled

disabledWhenNotFocused

disableThumbnail

trapFocus

PartialDisablingConfiguration

コールバックプロパティ

onValueChange

onSlidingStart

onSlidingEnd

onRewindPress

onFastForwardPress

onPress

onPlayPause

onFocus

onBlur

onSeekInteractionChange

イベントシーケンス

完全なイベントフロー

視覚的なカスタマイズプロパティ

markers

displayAboveThumb

displayBelowThumb

thumbIcon

currentValueIndicatorColor

barTrackColor

segmentColors

使用例

スタイルプロパティ

barStyle

currentValueIndicatorStyle

timeShiftIndicatorStyle

サムネイルプロパティ

thumbnailStyle

thumbnailImageSource

thumbnailImageStyle

thumbnailImageResizeMode

thumbnailLabel

thumbnailLabelTextStyle

thumbnailLabelContainerStyle

操作タイミングのプロパティ

longPressIntervalDuration

longPressDelay

keyDownThrottleDelay

animationDuration

シーク動作のプロパティ

maxStepValue

stepMultiplierFactor

stepMultiplierFactorInterval

lowerSeekLimit

upperSeekLimit

enableLongPressAcceleration

enableSkipForwardBackwardAcceleration

enableAnimations

型定義

PartialDisablingConfiguration

InteractionEventPayload

DisplayAboveThumbProps

SegmentColorsConfig

ThumbIconProps

SeekMode

用語集