问题描述
我在选项卡更改时重新渲染组件时遇到问题,显然将 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"的区别和“懒惰"在反应导航选项中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!