You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Navigation返回含Vision Camera页面时过渡动画失效问题

React Navigation返回含Vision Camera页面时过渡动画消失并卡顿

我用React Navigation(native-stack)和React Native Vision Camera开发移动应用,给每个Stack.Screen配置了slide_from_right过渡动画,正常情况下动画运行良好,但从包含Vision Camera组件的ScanScreen返回时出现异常:

导航流程为Home -> Scan -> Result -> 返回Home,进入ScanScreen时动画正常,但在ScanScreen调用goBack()或在ResultScreen调用popToTop()时,过渡动画消失,应用还会出现短暂卡顿。

以下是ScanScreen的代码:

const ScanScreen = ({route, navigation}) => {
  const {locations} = route.params;

  // 权限相关
  const {hasPermission, requestPermission} = useCameraPermission();
  // 判断页面是否处于活跃状态
  const isFocussed = useIsFocused();
  const isForeground = useIsForeground();
  const isActive = isFocussed && isForeground;

  // 手电筒控制
  const [torch, setTorch] = useState('off');
  // 获取相机设备
  const device = useCameraDevice('back');
  // 相机初始化状态
  const [isCameraInitialized, setIsCameraInitialized] = useState(false);
  const onInitialized = useCallback(() => {
    console.log('Camera initialized!');
    setIsCameraInitialized(true);
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned: codes => {
      onQRCodeScan({codes});
    },
  });

 useFocusEffect(
    useCallback(() => {
      if (!hasPermission) {
        requestPermission();
      }
      return () => {
    //    setIsCameraReady(false);
      };
    }, []),
  );

     {device != null && (
        <Camera
          style={{flex: 1}}
          device={device}
          isActive={isActive}
          onInitialized={onInitialized}
          codeScanner={codeScanner}
          torch={torch}
        />
      )}
})

我推测可能是Vision Camera资源占用过高,或是生命周期处理不当(暂未在iOS测试)。尝试在页面离开前通过transitionStart监听停用相机,但调用goBack()后该事件未触发:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionStart', (e) => {
    // 执行操作
  });

  return unsubscribe;
}, [navigation]);

内容的提问来源于stack exchange,提问作者honam wong

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 14:31:03