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

Posted 2023-03-13

【中文标题】如何在 expo-av Video 上使用 playFromPositionAsync？反应原生

【英文标题】：How to use playFromPositionAsync on expo-av Video? ReactNative

【发布时间】：2020-10-19 05:49:17

【问题描述】：

我正在使用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，但该示例显示了一个基于类的组件，并且我使用的是函数式/无状态组件。

有什么想法吗？

【参考方案1】：

根据documentation，您必须在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
    />
)
...