Javascript 如何在底部选项卡导航器中卸载非活动屏幕?
我正在为react native使用react导航。是否有一个选项可以使非活动选项卡屏幕像UnmountNativeRoutes:true in DroperAvigator一样卸载??我找不到类似于为BottomTabNavigator卸载活动的东西 我在BottomTabNavigator中有两个StackNavigator,我想自动卸载它们Javascript 如何在底部选项卡导航器中卸载非活动屏幕?,javascript,reactjs,react-native,react-navigation,Javascript,Reactjs,React Native,React Navigation,我正在为react native使用react导航。是否有一个选项可以使非活动选项卡屏幕像UnmountNativeRoutes:true in DroperAvigator一样卸载??我找不到类似于为BottomTabNavigator卸载活动的东西 我在BottomTabNavigator中有两个StackNavigator,我想自动卸载它们 底部选项卡导航器 斯塔克1 屏风 屏风 斯塔克2 屏风 屏风 因此我不知道您是否可以卸载不活动的组件。我没有找到它,但这是我的解决方法,
- 底部选项卡导航器
- 斯塔克1
- 屏风
- 屏风
- 斯塔克2
- 屏风
- 屏风
- 斯塔克1
isFocused
为false。返回null。所以这或多或少会给你你想要的。如果isFocused为true,则将渲染通常渲染的内容。如果为false,则返回null。导致组件卸载
一些参考您可以通过在导航屏幕选项中添加选项来卸载底部选项卡中的屏幕:
unmountOnBlur: true
您可以在选项卡和抽屉导航中完成,但不能在堆栈导航中完成
您还可以通过在选项卡或抽屉屏幕选项中添加相同的选项来添加卸载单个屏幕。我尝试了Ubaid的答案,它是有效的。但你也可以试试这个: 使用
它工作得非常好。对于react navigation 5.x?是的,你的建议很有效。我试过了。还有一个
useFocusEffect
钩子,基本上是一样的,但是已经打包成了一个类似useffect
的钩子,可以从@react-navigation/native
导入。相同的结果,代码更少:)
import {useIsFocused} from '@react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
// Do whatever you want to do when screen gets in focus
}, [props, isFocused]);