2

我在使用 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，但仍然是空白空间。

任何帮助表示赞赏！谢谢

4

1 回答 1

2

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

<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个解决方案：

  1. 您将更改 webview 的高度及其位置。看看这个：使用动画增加视图的宽度高度。
  2. 使您的 webview 的高度大于其默认高度。所以当你翻译 webview 时，多余的空间会覆盖你的空白空间。在这种情况下，您必须使用React Native Dimension计算 webview 的高度
  3. 有一个变换的属性，称为scale。您可以使用它来拉伸您的 webview，但我不知道它是否会拉伸您的 webview 的内容。
于 2020-01-20T02:55:49.693 回答