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

Question

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做的那样。

Answer 1

为此，您需要跟踪滚动视图是如何移动的(偏移量)。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，但请注意，如果你查看web版本，似乎不会调用onScroll。

Answer 2

试试https://github.com/SvanBoxel/visibility-sensor-react-native

节省了我的时间。你可以像这样使用它。

import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'

const Example = props => {
  const handleImageVisibility = visible = {
    // handle visibility change
  }

  render() {
    return (
      <View style={styles.container}>
        <VisibilitySensor onChange={handleImageVisibility}>
          <Image
            style={styles.image}
            source={require("../assets/placeholder.png")}
           />
         </VisibilitySensor>
    </View>
   )
  }
}