react-navigation - 什么时候使用 ResourceSavingView？

Question

看起来像an interesting option for performance reasons .但我找不到任何指导、基准或动机。有谁知道什么时候应该使用ResourceSavingView？

Answer 1

如果您查看 react-navigation 源代码，ResourceSavingView 仅在名为 MaybeScreen 的组件中使用.该组件的目的是在可用时使用 react-native-screens，或者在 ResourceSavingView 不可用时回退到 ResourceSavingView，如您所见 here :

export function MaybeScreen({ visible, children, ...rest }: Props) {
  if (Screens?.screensEnabled?.()) {
    return (
      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
        {children}
      </Screens.Screen>
    );
  }

  return (
    <ResourceSavingView visible={visible} {...rest}>
      {children}
    </ResourceSavingView>
  );
}

换句话说，如果您正在使用 react-native-screens，ResourceSavingView 将永远不会被 react-navigation 在内部使用。

实际ResourceSavingView component相当简单:

<View
  style={[styles.container, style]}
  // box-none doesn't seem to work properly on Android
  pointerEvents={visible ? 'auto' : 'none'}
>
  <View
    collapsable={false}
    removeClippedSubviews={
      // On iOS, set removeClippedSubviews to true only when not focused
      // This is an workaround for a bug where the clipped view never re-appears
      Platform.OS === 'ios' ? !visible : true
    }
    pointerEvents={visible ? 'auto' : 'none'}
    style={visible ? styles.attached : styles.detached}
  >
    {children}
  </View>
</View>

如您所见，它基本上只是在组件可见时启用一些性能特性。

主要目的似乎是禁用pointerEvents并滑稽地移动 View 的内容 FAR_FAR_AWAY:

const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container

// ...

const styles = StyleSheet.create({
  // ...
  detached: {
    flex: 1,
    top: FAR_FAR_AWAY,
  },
});

所以，为了回答您的问题，据我所知，当您需要呈现 View 但并不总是可见时，它旨在用于提高性能。这是 react-navigation 需要的东西，因为像过渡动画这样的东西要求 Screen 即使在它们不可见时也保持挂载状态。

当然，根据您的情况，您始终可以直接使用 pointerEvents 和奇怪的风格 hack。

就个人而言，我会避免使用 ResourceSavingView。如果 ResourceSavingView 最终被弃用，我不会感到惊讶，因为它很明显被用作后备。 (使用它的文件实际上称为 ScreenFallback.tsx 。)