如何在 expo-av Video 上使用 playFromPositionAsync？ 反應原生

Question

我正在使用Video Expo組件並注意到有一個道具playFromPositionAsync 。

我在 Video.d.ts 上看到了這個：

export default class Video extends React.Component<VideoProps, VideoState> implements Playback {
  ...
  playFromPositionAsync: (positionMillis: number, tolerances?: {
        toleranceMillisBefore?: number;
        toleranceMillisAfter?: number;
  }) => Promise<AVPlaybackStatus>;
}

我的代碼上有這個：

import { Video } from 'expo-av';
...
return data.feed.map((item: DataType, idx: number) => (
      <Video
        key={item.id}
        useNativeControls={false}
        isMuted={currentIndex !== idx}
        source={{ uri: item.video_url }}
        shouldPlay={currentIndex === idx}
      />
)

看到這一行： shouldPlay={currentIndex === idx}

我想用playFromPositionAsync做類似的事情

<Video playFromPositionAsync={currentIndex === idx && playFromPositionAsync(0)}

好吧，上面的代碼不起作用。

我需要在currentIndex === idx時使用該道具/功能： playFromPositionAsync ，那么我該如何使用它呢？

我看到了一個這樣的例子： https://github.com/expo/playlist-example/blob/51718bc8bf398bdccda46748e777c294cd40db99/App.js#L404但這個例子顯示了一個 ZA2F2ED4F8EBC2CBB4C21A29 使用基於功能的組件和無狀態組件。

有任何想法嗎？

Answer 1

根據文檔，您必須在Video實例上使用ref 。 然后通過這個ref訪問playFromPositionAsync

...
const _handleVideoRef = (component, index) => {
  const playbackObject = component;
  if (playbackObject && index === currentIndex) {
    playbackObject.playFromPositionAsync(0)
  }
  ...
}

...

render() {
  return data.feed.map((item: DataType, idx: number) => (
    <Video
      key={item.id}
      ref={(component) => _handleVideoRef(component, idx)} // add passing ref here
      useNativeControls={false}
      isMuted={currentIndex !== idx}
      source={{ uri: item.video_url }}
      shouldPlay={currentIndex === idx}
    />
)
...