react导航选项中“lazyLoad”和“lazy”之间的区别

IT技术 reactjs react-native react-navigation
2021-04-25 04:06:58

我在选项卡更改时重新渲染我的组件时遇到问题，显然添加lazyLoad: true到导航选项解决了它。

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

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

2个回答

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

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

For react-navigation-v1：当TabNavigator它安装在屏幕上时，它会尝试将其内部配置的所有屏幕/组件一次推送到 UI。所以为了避免这种行为，在TabNavigator选项中，lazyLoad: true或者lazy: true被传递，所以可以根据需要渲染屏幕/组件。

直到react-navigation 1.0.0-beta9,lazyLoad: true被使用，但因为它现在稳定，所以lazy: true被使用。

对于react-navigation-v2:TabNavigator并且createTabNavigator已弃用，您将始终收到黄屏错误，因此请使用createBottomTabNavigator和/或createMaterialTopTabNavigator. 该lazy选项与TabNavigatorand 一起使用createTabNavigator，createBottomTabNavigator具有lazyLoading内置选项，但createMaterialTopTabNavigator似乎有问题，该lazy选项不起作用。

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

请检查这里我在那里写了完整的代码

这是重要的部分

  lazy={true}
  optimizationsEnabled={true}
  tabBarOptions={tabBarOptions}
其它你可能感兴趣的问题
上一篇Cura中的“初始层宽度”和“初始层流”有什么区别？ 下一篇我如何通过react导航访问 redux 商店？