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

Question

我正在使用 React-Navigation V4，问题是，是否有任何延迟加载特定选项卡的方法，例如我有四个选项卡，我想在选项卡组件初始化后加载两个选项卡并且不想加载另外两个这两个只有在用户激活它们时才会加载。 如果我在 React 中使用lazy: true，它将适用于所有选项卡，或者延迟加载将为所有人禁用或为所有人启用。

Answer 1

不幸的是，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>
  )
 }