反应导航选项中 "lazyLoad" 和 "lazy" 之间的区别

Question

我在选项卡更改时重新呈现我的组件时遇到问题，显然在导航选项中添加 lazyLoad: true 解决了这个问题。

但我不太明白它是如何工作的...尤其是在那之前，我遇到了另一个问题，在选项中添加 lazy: true 解决了它。

所以我的问题是，两者之间有什么区别以及它们在 react-navigation 中的工作方式:)

Answer 1

react navigation有两个主要版本， react-navigation-v1 and react-navigation-v2

当 react-navigation 加载导航器时，例如 TabNavigator，它会尝试呈现该导航器内的所有屏幕。

对于react-navigation-v1：当TabNavigator挂载到屏幕上时，它会尝试将其内部配置的所有screens/components一次推送到UI。因此，为了避免这种行为，在 TabNavigator 选项中，传递了 lazyLoad: true 或 lazy: true，因此可以根据需要呈现 Screens/Components。

react-navigation 1.0.0-beta9之前用的是lazyLoad: true，现在稳定了，所以用的是lazy: true

For react-navigation-v2: TabNavigator and createTabNavigator are deprecated, you will always get that yellow screen error, so use createBottomTabNavigator and/or createMaterialTopTabNavigator。 lazy 选项与 TabNavigator 和 createTabNavigator 一起使用，createBottomTabNavigator 内置了 lazyLoading 选项，但 createMaterialTopTabNavigator 似乎有问题， lazy 选项不起作用。

我希望这能回答你的问题。

Answer 2

我在那里写了完整的代码

这是重要的部分

  lazy={true}
  optimizationsEnabled={true}
  tabBarOptions={tabBarOptions}

反应导航选项中 "lazyLoad" 和 "lazy" 之间的区别

Difference between "lazyLoad" and "lazy" in react-navigation options

reactjs

react-native

react-navigation