本文介绍了“lazyLoad"与“lazyLoad"的区别和“懒惰"在反应导航选项中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在选项卡更改时重新渲染组件时遇到问题,显然将 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-v1react-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: truelazy: 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:TabNavigatorcreateTabNavigator 已弃用,您将始终收到黄屏错误,因此请使用 createBottomTabNavigator 和/或 createMaterialTopTabNavigator .lazy 选项适用于 TabNavigatorcreateTabNavigatorcreateBottomTabNavigator 内置了 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"的区别和“懒惰"在反应导航选项中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-24 21:40