reactjs - 使用 React-Navigation v4 延迟加载特定选项卡

标签 reactjs react-native react-navigation react-navigation-stack react-navigation-bottom-tab

我正在使用 React-Navigation V4,问题是,是否有任何方法可以仅延迟加载特定选项卡,例如我有四个选项卡并且我想在选项卡组件初始化后加载两个选项卡并且不想加载其他两个这些选项卡两个只会在用户激活它们时加载。
如果我使用 lazy: true在 React 中,它可以在所有选项卡上工作,或者为所有人禁用延迟加载或为所有人启用。

最佳答案

不幸的是,react navigation v4 中没有这样的东西。但是如果你想实现性能,你可以使用其他方法来延迟加载屏幕的一部分。

const TabPage = (props) => {
  const [renderHeavy, setRender] = useState(false)

  useEffect(() => {
      InteractionManager.runAfterInteraction(() => setRender(true))
  }, [])

  return (
      <View style={styles.body}>
          {
              renderHeavy &&
              <HeavyComponent />
          }
          <AnotherComponent />
      </View>
  )
 }

关于reactjs - 使用 React-Navigation v4 延迟加载特定选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60002506/

相关文章:

javascript - 如何在react组件中使用现有的javascript代码

node.js - NPM模块需要从/Users/node_modules/而不是项目目录中获取

react-native - route.params 不使用 React Navigation 返回变量

react-native - 如何在某些路由上设置 headerMode 而不是其他路由。 ( react 导航)

javascript - 如何从 navigationOptions 内的文本输入更新 react native 组件的状态?

reactjs - 意外 token : operator (>) in production build

reactjs - 有没有办法在 typescript 中描述 react 生命周期方法?

ios - 在 native iOS 中显示没有文本输入的键盘

javascript - 从 React-Native 应用程序中的另一个类访问静态变量?

react-native - 如何隐藏屏幕标题但显示后退按钮?