“lazyLoad"与“lazyLoad"的区别和“懒惰"在反应导航选项中 [英] Difference between "lazyLoad" and "lazy" in react-navigation options

问题描述

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

I had a problem re-rendering my component on tabs change, and apparently adding lazyLoad: true to the navigation options solved it.

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

But I don't understand very well how it works...especially before that, I had another problem and adding lazy: true to options solved it.

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

so my question is, what is the difference between the two and how they work in react-navigation :)

推荐答案

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

There are two major releases of react navigation, react-navigation-v1 and react-navigation-v2

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

When react-navigation loads up a navigator e.g TabNavigator, it tries to render all the screens inside that navigator.

对于react-navigation-v1:当TabNavigator被挂载到屏幕上时，它会尝试一次性将自己内部配置的所有屏幕/组件推送到UI.所以为了避免这种行为，在 TabNavigator 选项中，lazyLoad: true 或 lazy: true 被传递，所以屏幕/组件可以被渲染根据需要.

For react-navigation-v1: When the TabNavigator is mounted on the screen, It tries to push all the screens/components configured inside itself at once to the UI. So to avoid this behavior, in the TabNavigator options, lazyLoad: true or lazy: true is passed, so the Screens/Components can be rendered as required.

直到react-navigation 1.0.0-beta9，才使用lazyLoad: true，不过现在稳定了，lazy: true使用.

Until react-navigation 1.0.0-beta9, lazyLoad: true was used, but since it is stable now, lazy: true is used.

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

For react-navigation-v2: TabNavigator and createTabNavigator are deprecated, you will always get that yellow screen error, so use createBottomTabNavigator and/or createMaterialTopTabNavigator . The lazy option works with TabNavigator and createTabNavigator, createBottomTabNavigator has lazyLoading option built in, but createMaterialTopTabNavigator seems to buggy, the lazy option does not work.

我希望这能回答您的问题.

I hope this answers your question.

这篇关于“lazyLoad"与“lazyLoad"的区别和“懒惰"在反应导航选项中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！