react-native-video-controls返回后初始页FlatList点击失效问题求助

可能原因及修复步骤 #

1. 销毁视频播放实例 #

react-native-video组件在页面卸载时若未停止播放或销毁实例，可能占用触摸事件资源。在视频页面的生命周期钩子中手动清理：

• 函数组件示例：

import { useRef, useEffect } from 'react';
import Video from 'react-native-video';

const VideoPlayerScreen = ({ navigation }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    return () => {
      if (videoRef.current) {
        videoRef.current.pause();
        videoRef.current = null;
      }
    };
  }, []);

  return <Video ref={videoRef} {/* 其他配置 */} />;
};

• 类组件示例：

import React, { Component } from 'react';
import Video from 'react-native-video';

class VideoPlayerScreen extends Component {
  videoRef = null;

  componentWillUnmount() {
    if (this.videoRef) {
      this.videoRef.pause();
      this.videoRef = null;
    }
  }

  render() {
    return <Video ref={ref => this.videoRef = ref} {/* 其他配置 */} />;
  }
}

2. 修正onBack事件逻辑 #

确保onBack仅触发页面返回，无多余的触摸拦截代码：

<VideoControls
  onBack={() => navigation.goBack()}
  {/* 其他配置 */}
/>

3. 重置FlatList状态 #

利用页面focus事件刷新FlatList，强制重置触摸层状态：

const HomeScreen = ({ navigation }) => {
  const [listKey, setListKey] = useState(0);

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setListKey(prev => prev + 1);
    });
    return unsubscribe;
  }, [navigation]);

  return (
    <FlatList
      key={listKey}
      data={yourData}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => console.log(item)}>
          {/* 列表项内容 */}
        </TouchableOpacity>
      )}
    />
  );
};

4. 强制关闭控制浮层 #

返回前手动隐藏视频控制层，避免浮层遮挡触摸：

<VideoControls
  ref={controlsRef}
  onBack={() => {
    controlsRef.current?.hideControls();
    navigation.goBack();
  }}
/>

5. 检查版本兼容性 #

确保react-native-video与react-native-video-controls版本兼容，可尝试锁定稳定版本组合：

{
  "react-native-video": "^5.2.1",
  "react-native-video-controls": "^2.8.1"
}

内容的提问来源于stack exchange，提问作者Nagaraj sk