如何在 React Native Expo 上停止运行旧屏幕答案

【问题标题】：How to stop running old screen on React Native Expo如何在 React Native Expo 上停止运行旧屏幕
【发布时间】：2022-10-22 08:27:27
【问题描述】：

我使用 React Navigation 来移动屏幕。

我这样设置堆栈屏幕：

<Stack.Screen name="camera" component={Opencamera} options={{headerShow: false}} />
<Stack.Screen name="previewpic" component={Previewpic} options={{headerShow: true}} />

所以当我将'camera' 导航到'previewpic' 时，我可以，但相机中的进程正在运行。（此问题仅发生在 ios 设备上。）

我需要在没有camera 屏幕运行的情况下移动到previewpic 屏幕。谢谢你。

【问题讨论】：

“跑步”是什么意思？究竟会发生什么？
您正在使用哪个 camera 库？ expo camera 还是 react-native-camera？
是的世博相机
我在相机屏幕中进行面部检测并记录它，当我移动到 previewpic 屏幕时，终端记录代码一直来自相机屏幕
这似乎是 Expo Camera 库本身的问题，与反应导航无关。当我们从屏幕 B 回到屏幕 A 时，正确调用了卸载。我仍在研究如何在导航更改时停止 Expo Camera

标签： react-native expo react-navigation

【解决方案1】：

选项1：使用 unmountOnBlur 属性，这将在路由更改时卸载屏幕

<Stack.Screen name="camera" component={Opencamera} options={{headerShow: false, unmountOnBlur: true}} />
<Stack.Screen name="previewpic" component={Previewpic} options={{headerShow: true}} />

选项 2： useIsFocused 钩子

import { useIsFocused } from '@react-navigation/native';

....
// This hook returns `true` if the screen is focused, `false` otherwise
const isFocused = useIsFocused();

 return (isFocused &&  <Camera  />)
....

【讨论】：