React Native 使用 Animated 隐藏 Header（TransformY 后留空 space）

Question

我在 React native 中使用 Animated 滚动时实现了隐藏 header。这是代码：

const y = new Animated.Value(0);
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
const HEADER_HEIGHT = 60;
const {diffClamp} = Animated;

function WebPage({route}) {
  const diffClampY = diffClamp(y, 0, HEADER_HEIGHT);
  const translateY = diffClampY.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [0, -HEADER_HEIGHT],
  });
  return (
    <SafeAreaView style={{flex: 1}}>
      <Animated.View
        style={{
          height: HEADER_HEIGHT,
          width: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 2,
          backgroundColor: 'lightblue',
          transform: [{translateY: translateY}],
        }}
      />
      <AnimatedWebView
        source={{
          uri: 'https://www.whosebug.com',
        }}
        originWhitelist={['*']}
        containerStyle={{paddingTop: 60}}
        bounces={false}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
      />
    </SafeAreaView>
  );
}

由于 Header 绝对定位以粘在顶部，我给定了 paddingTop（与 header 的高度相同）以避免 header 最初与 WebView 的内容重叠.现在正因为如此，当我滚动时，header 消失，它会留下空白 space，如图所示：

以上是隐藏 Header 之前和之后的图像。空白 space 保留在 header 曾经所在的位置。我应该如何动态更改填充，以便 header 消失时，没有空白 space 留下？我试过没有绝对定位 header 并且没有给 Webview 任何 paddingTop，但仍然空白 space.

感谢任何帮助！谢谢

Answer 1

当您使用 translateY 时，这意味着您正在将 header 移离其当前位置，而不是其所在的位置。你看到的空白 space 是 header 的锚点（打开你的调试器，你会看到你的 header 组件仍然在原来的位置）。为了移动您的 webview，只需将您的 webview 的 translateY 与您的 header 绑定，您将拥有完美的动画。

<AnimatedWebView
    source={{
      uri: 'https://www.whosebug.com',
    }}
    originWhitelist={['*']}
    containerStyle={{paddingTop: 60}}
    bounces={false}
    onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
    style={{
        transform: [{translateY: translateY}]
    }}
/>

编辑 1

我正在考虑 3 个解决方案：

您将更改 webview 的高度及其位置。检查一下：Increase width height of view using animation.
使您的网络视图的高度大于其默认高度。所以当你翻译webview的时候，多余的space会盖住你的空白space。在这种情况下，您必须使用 React Native Dimension
有一个转换的属性，称为 scale。您可以使用它来拉伸您的 webview，但我不知道它是否会拉伸您的 webview 的内容。

React Native 使用 Animated 隐藏 Header（TransformY 后留空 space）

React Native using Animated to hide Header (leaves blank space after TransformY)

react-native

react-native-reanimated

编辑 1