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
相关产品推荐
相关产品推荐

