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

Question

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

标签： reactjsreact-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab

Answer 1

不幸的是，反应导航 v4 中没有这样的东西。但是如果你想获得性能，你可以使用其他方法来延迟加载屏幕的一部分。

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

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

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