切换Tab/View时相机未关闭导致黑屏的技术求助

我来帮你搞定这个相机组件切换Tab后的异常问题～

问题原因分析 #

从你的代码来看，一旦获取到相机权限，render方法就直接返回了<Camera>组件。当你切换Tab时，如果当前包含相机的组件没有被卸载（比如React Navigation的TabNavigator默认不会卸载未激活的Tab页面），相机会持续占用硬件资源。当你返回该Tab时，相机资源没有被正确释放，就会出现黑屏、按钮消失的情况——本质是相机还在后台运行，导致界面无法正常渲染初始的按钮状态。

解决方案 #

我们可以通过状态控制相机显示/隐藏 + 监听页面焦点/组件生命周期释放相机资源来解决这个问题：

1. 添加状态控制相机可见性

首先在组件的state里新增一个isCameraVisible字段，用来控制相机组件是否显示，而不是直接替换整个视图：

constructor(props) {
  super(props);
  this.state = {
    hasCameraPermission: null,
    isCameraVisible: false, // 新增状态：控制相机是否显示
  };
}

2. 修改render逻辑

调整render方法，根据isCameraVisible状态来决定显示相机还是按钮，同时给Camera组件添加ref以便后续控制：

render() { 
  const { hasCameraPermission, isCameraVisible } = this.state; 
  if (hasCameraPermission === null) { 
    return (
      <View>
        <Button onPress={() => this.setState({ isCameraVisible: true })} title="Show Camera" />
      </View>
    ); 
  } else if (hasCameraPermission === false) { 
    return <Text>No access to camera</Text>; 
  } else { 
    return ( 
      <View>
        {isCameraVisible ? (
          {/* 添加ref用于控制相机 */}
          <Camera ref={ref => this.cameraRef = ref} />
        ) : (
          <Button onPress={() => this.setState({ isCameraVisible: true })} title="Show Camera" />
        )}
      </View> 
    ); 
  } 
}

3. 监听页面焦点，离开时释放相机资源

因为Tab切换时组件通常不会卸载，所以我们需要监听Tab的blur（失去焦点）事件，在离开页面时主动关闭相机并重置状态：

componentDidMount() {
  // 监听页面失去焦点事件（React Navigation）
  this.focusListener = this.props.navigation.addListener('blur', () => {
    // 停止相机预览并释放资源
    if (this.cameraRef) {
      this.cameraRef.stopPreview();
      // 如果是react-native-camera的RNCamera，部分版本需要调用releaseCamera
      // this.cameraRef.releaseCamera();
    }
    // 重置相机可见状态，返回时显示按钮
    this.setState({ isCameraVisible: false });
  });
}

componentWillUnmount() {
  // 移除监听
  this.focusListener();
  // 组件卸载时确保释放相机资源
  if (this.cameraRef) {
    this.cameraRef.stopPreview();
  }
}

额外说明 #

• 不同的相机库（比如react-native-camera、react-native-vision-camera）的资源释放方法可能略有不同，你需要根据使用的库文档调整对应的API（比如stopPreview、release等）。
• 如果你的Tab导航是其他实现方式，只需要找到对应的页面离开/失去焦点的事件，在该事件中执行相机资源释放逻辑即可。

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