在 RecyclerListView 中的屏幕视图外在反应本机时暂停视频

Question

我正在 React-Native 中使用 RecyclerListView 实现视频播放应用程序（如 Instagram Reels 或 tik tok）。在开发应用程序时，我面临列表中所有视频同时播放的问题。我想暂停所有其他不在屏幕上的视频，并且仅在滚动到特定视频并且视频在屏幕上可见时播放。

怎么做？我尝试了很多东西，但找不到 RecyclerListView 的解决方案。

我用react-native-video播放视频。

App.js

import VideoPlayer from './ViewVideo';
const fakeData = [
  {
    type: 'NORMAL',
    item: {
      uri: require('./images/likd2.mp4'),
    },
  },
  {
    type: 'NORMAL',
    item: {
      uri: require('./images/Linkd.mp4'),
    },
  },
  {
    type: 'NORMAL',
    item: {
      uri: require('./images/PlayDate.mp4'),
    },
  },
];
export default class Myworld extends React.Component {
  dataProvider = new DataProvider((r1, r2) => {
    return r1 !== r2;
  }).cloneWithRows(fakeData);

  layoutProvider = new LayoutProvider(
    (i) => {
      return this.dataProvider.getDataForIndex(i).type;
    },
    (type, dim) => {
      switch (type) {
        case 'NORMAL':
          dim.width = '100%';
          dim.height = '100%';
          break;
        default:
          dim.width = '100%';
          dim.height = '100%';
          break;
      }
    },
  );

  rowRenderer = (type, data, index) => {
    switch (type) {
      case 'NORMAL':
        return (
          <View>
            <VideoPlayer source={uri} />
          </View>
        );
    }
  };

  render() {
    return (
      <>
        <SafeAreaView style={styles.container}>
          <RecyclerListView
            style={styles.videolistcontainer}
            rowRenderer={this.rowRenderer}
            dataProvider={this.dataProvider}
            layoutProvider={this.layoutProvider}
            initialOffset={1}
            pagingEnabled={true}
            showsVerticalScrollIndicator={false}
          />
        </SafeAreaView>
      </>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#14171A',
  },
});

ViewVideo.js

const VideoPlayer = (props) => {
  const [paused, setPause] = useState(false);
  return (
    <>
      <TouchableOpacity
        style={{height: height, width: width}}
        onPress={() => setPause(!paused)}>
        <Video
          ref={(ref) => {
            setVideoRef(ref);
          }}
          source={props.source}
          style={styles.backgroundVideo}
          resizeMode={'cover'}
          onError={onError(videoRef)}
          paused={paused}
          onLoad={onLoad}
          onProgress={onProgress}
          onEnd={onEnd}
          repeat={false}
          rate={1.0}
          volume={1.0}
          muted={false}
          onLayout={onVideoLayout}
        />
      </TouchableOpacity>
    </>
  );
};

export default VideoPlayer;
const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    width: WP('100%'),
    height: HP('100%'),
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
});

Answer 1

你可以使用 React-Native 的 AppState。

它表示应用程序的未来状态：活动、后台或非活动（仅限IOS）

例子：

import React, { useRef, useState, useEffect } from "react";
import { AppState, Text, View } from "react-native";
    
const AppInactiveHandleExample = () => {
    const appState = useRef(AppState.currentState);
    const [appStateVisible, setAppStateVisible] = useState(appState.current);

    useEffect(() => {
        AppState.addEventListener("change", handleAppStateChange);
        // Return for clear the cache of action
        return () => {
            AppState.removeEventListener("change", handleAppStateChange);
        };
    }, []);

    const handleAppStateChange = nextAppState => {
    if (
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
    ) {
        // Execute here your action  
        onAppInactive()
    }
        appState.current = nextAppState;
        setAppStateVisible(appState.current);
    };

    // Action executed when app was inactive or background
    const onAppInactive = () => {
        // Your code here 
    }

    return (
    <View>
        <Text>Current state is: {appStateVisible}</Text>
    </View>
    );
};

export default AppInactiveHandleExample;

https://reactnative.dev/docs/appstate