在 react-native 中自动播放元素焦点上的视频

如何解决在 react-native 中自动播放元素焦点上的视频

import {Video} from 'expo-av';
return (

      <FlatList 
        data={videos}
        // keyExtractor={(item,ind}
        keyExtractor={(item) => item.names}
        renderItem={({item})=>(
          <TouchableOpacity
          onPress={() => {console.log('pushed');navigation.push('Details',{url:item.videourl})}}>
            <Video
                usePoster="true"
                source={{ uri: item.videourl }}
                rate={1.0}
                volume={1.0}
                isMuted={false}
                resizeMode="cover"
                shouldplay={isFocused ? true : false}
                // isLooping
                // useNativeControls
                posterSource={{uri:item.imageurl}}
                style={{ height: 300 }}
                
                
                /> 
                


          </TouchableOpacity>
        )}/>

  );

如果一个视频聚焦，则必须播放该视频，如果视频未聚焦，则应暂停。我正在使用 expo-av 播放视频。上面的代码正在屏幕上播放所有视频，但我想播放像 youtube 一样聚焦的视频。

解决方法

为此，您需要跟踪滚动视图的移动方式（偏移量）。 FlatList 有一个 onScroll 属性，回调会在其中提供有关列表布局等的信息，并且您有兴趣跟踪内容已垂直滚动的程度 - 即 contentOffset.y。

将此值除以列表项高度（在您的情况下为常数 300）并四舍五入将为您提供应该播放的项目的索引。

使用 state 来存储当前聚焦的索引：

const [focusedIndex,setFocusedIndex] = React.useState(0);

为 onScroll 事件添加处理程序：

const handleScroll = React.useCallback(({ nativeEvent: { contentOffset: { y } } }: NativeSyntheticEvent<NativeScrollEvent>) => {
  const offset = Math.round(y / ITEM_HEIGHT);

  setFocusedIndex(offset)
},[setFocusedIndex]);

将处理程序传递给您的列表：

<FlatList
  onScroll={handleScroll}
  ...
/>

并修改视频的 shouldPlay 道具：

<Video
  shouldPlay={focusedIndex === index}
  ...
/>

您可以在此处查看工作小吃：https://snack.expo.io/@mlisik/video-autoplay-in-a-list，但请注意，如果您查看网络版本，则似乎不会调用 onScroll。