react-native - React Native 使用 Animated 隐藏 Header(TransformY 后留下空白)

Question

我在使用 Animated 在 React Native 中滚动时实现了隐藏标题。
这是代码:

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.stackoverflow.com',
        }}
        originWhitelist={['*']}
        containerStyle={{paddingTop: 60}}
        bounces={false}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
      />
    </SafeAreaView>
  );
}

由于 Header 是绝对定位到顶部的，所以我给出了 paddingTop(与 header 的高度相同)以避免 header 最初与 WebView 的内容重叠。现在正因为如此，当我滚动时，随着标题消失，它会留下空白区域，如图所示:





上图是隐藏标题前后的图像。在原来的页眉位置留有空格。我应该如何动态更改填充，以便在标题消失时没有剩余空间？我试过没有绝对定位标题并且没有给Webview提供paddingTop，但仍然是空白。

任何帮助表示赞赏!谢谢

Answer 1

当您使用 translateY ，这意味着您正在将标题从其当前位置移开，而不是它所在的位置。你看到的空白区域是标题的一种 anchor (打开你的调试器，你会看到你的标题组件仍然在旧位置)。为了移动你的 webview，只需绑定(bind)你的 webview 的 translateY与您的标题一起，您将拥有完美的动画。

<AnimatedWebView
    source={{
      uri: 'https://www.stackoverflow.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 的高度大于其默认高度。所以当你翻译 webview 时，多余的空间会覆盖你的空白空间。在这种情况下，您必须使用 React Native Dimension 计算 webview 的高度。

有一个变换的属性，叫做 scale .您可以使用它来拉伸(stretch)您的 webview，但我不知道它是否会拉伸(stretch)您的 webview 的内容。