React-native 组件缓存(或防止卸载)(react-navigation)

Posted

技术标签:

【中文标题】React-native 组件缓存(或防止卸载)(react-navigation)【英文标题】:React-native component cache (or prevent unmounting) (react-navigation) 【发布时间】:2019-03-19 20:39:16 【问题描述】:

所以我的问题很简单。

我通过 react-navigation 进行导航。场景

    从屏幕 A 导航到屏幕 B。 - 屏幕 B 中的每个组件都在安装/创建 从B回到A - 屏幕 B 中的每个组件正在卸载 再次从 A 导航到 B - 屏幕 B 中的每个组件都在重新安装。

有什么办法可以防止这种情况发生吗?数据不是问题,我将它们保存在 redux 存储中。案例与组件。

在我的应用程序中,用户将不断在两个屏幕之间切换,我不想每次都构建其中一个。

有什么想法吗?

【问题讨论】:

您是否尝试过自定义导航器? 是的,我确实尝试过构建自定义导航器,但我希望有一个相对简单的解决方案。 【参考方案1】:

嗯,这不是一个完美的解决方案,

但我也搜索了很多,但找不到这个东西可以工作。

因此,作为一种方便的技巧,您可以使用任何 Tab Navigator 并隐藏 Tab Bar。

因为只有 Tab Navigator 会维护其堆栈中的所有屏幕,即使您离开屏幕也是如此。

看到这个,

export const MainTabs = createBottomTabNavigator(
    Home: 
           screen: Home,
           navigationOptions: () => 
               return  tabBarVisible: false ;
           ,
    
    Dashboard: 
           screen: Dashboard,
           navigationOptions: () => 
               return  tabBarVisible: false ;
           ,
    
)

这将在 Tab 中保留所有屏幕,您也不会看到任何 Tab。

【讨论】:

嘿,谢谢! TabNavigator 的问题是我没有返回导航和“滑动返回”功能。同样在我的设计中已经有一个标签栏,并且有一个嵌套的标签栏,然后更改设置(如标题)将影响两个标签栏。这太麻烦了。我想让屏幕在后退导航中滑入和滑出,而标签导航器似乎无法做到这一点。

以上是关于React-native 组件缓存(或防止卸载)(react-navigation)的主要内容,如果未能解决你的问题,请参考以下文章

react-native--生命周期

React-Native清除缓存汇总

React-Native清除缓存汇总

React-Native清除缓存汇总

React-Native清除缓存汇总

React-Native清除缓存汇总