react-navigation v6仅惰性加载特定选项卡

ao218c7q  于 2023-04-12  发布在  React
关注(0)|答案(1)|浏览(139)

所以在我问之前我真的试着先搜索答案,但是没有任何好的最新答案。
技术栈:React-Native React-Navigation v6 BottomTabBar
问:我想延迟加载3个标签,并急切地加载2个其他标签。我如何做到这一点的唯一选择react-navigation v6给出了一个bool属性,可以设置标签中的所有视图为延迟加载或不。这里有人知道解决这个问题的最佳方法是什么吗?
我发现一些消息来源说,使用一个钩子来聚焦你的屏幕,这样他们就可以强制加载它们等等。然而,这是版本1,钩子已经不存在了。
我确实找到了一篇关于v4以及他们如何解决它的帖子,但我认为应该有一个更好的v6解决方案

pokxtpni

pokxtpni1#

您可以使用Screen组件的options属性为特定屏幕给予惰性选项。

{/* lazy: true means that all of the screen's default load is lazy */}
<BottomTabStack.Navigator initialRouteName="ScreenName1" screenOptions={{lazy: true}}>
  <BottomTabStack.Screen
    name="ScreenName1"
    // Passing lazy: false will override the default lazy: true
    options={{lazy: false}}
    component={ScreenComponent1}
  />

  <BottomTabStack.Screen
    name="ScreenName2"
    // Passing lazy: true will override the default lazy: true, so no change
    options={{lazy: true}}
    component={ScreenComponent2}
  />

  <BottomTabStack.Screen
    name="ScreenName3"
    component={ScreenComponent3}
    // Not passing any lazy value will use the default lazy: true 
  />
</BottomTabStack.Navigator>

您可以查看文档以获取更多信息:https://reactnavigation.org/docs/screen-options/#options-prop-on-screen

相关问题