仅反应导航 v6 延迟加载特定选项卡

Question

所以我真的试着在问之前先搜索答案，但没有任何好的最新答案。

技术栈： 反应本机 反应导航 v6 底部标签栏

问题：我正在尝试延迟加载 3 个选项卡并急切加载其他 2 个选项卡。知道我该怎么做，react-navigation v6 提供的唯一选项是一个 bool 属性，它可以将选项卡中的所有视图设置为是否延迟加载。这里的任何人都知道解决这个问题的最佳方法是什么？

我发现一些消息来源说使用钩子来聚焦您的屏幕，以便它们强制加载它们等。但是这是针对版本 1 并且该钩子不再存在。

我确实找到了一篇关于 v4 以及他们如何解决它的帖子，但我认为 v6 应该有更好的解决方案

Answer 1

您可以使用 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