1 
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 一样聚焦的视频。

4

2 回答 2

0

试试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>
   )
  }
}
于 2021-09-02T08:39:25.337 回答
0

为此，您需要跟踪滚动视图的移动方式（偏移量）。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。

于 2021-04-12T09:33:27.627 回答