React Native 中的 Buggy 可折叠 Header 选项卡 (Android)

Question

我正在尝试构建一个可折叠的 header 选项卡。

我终于找到了这个 Collapsible Header Tabs Snack 作为基本代码完美运行的代码。它在 IOS 上按预期工作，但我尚未确认 Android 版本。现在我看着它，它非常有问题。这可以在android中运行的上述小吃中看到。

Header 滚动非常有问题（波动），直到选项卡夹在顶部但随后滚动很平滑。我猜粘性滚动有问题，它有动画滚动视图和动画视图。

我试过添加 scrollToOverflowEnabled = {true} overScrollMode={'never'} 但它没有帮助。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

这已通过将输入范围从 x 更改为 x*2 解决。

const translateY = this.props.screenProps.scrollY.interpolate({
  inputRange:  [0, headerHeight],
  outputRange: [0, headerHeight],
  extrapolate: "clamp",
})

改为

const translateY = this.props.screenProps.scrollY.interpolate({
  inputRange:  [0, headerHeight * 2],
  outputRange: [0, headerHeight],
  extrapolate: "clamp",
})

我发现的一个解释是 iOS 给出的偏移量是一个系列，如 1、1.5、2、2.5，但 android 给出了十进制值的偏移量。

我不知道如何将输入范围更改为 x*2 解决这个问题，或者这是否是一个原因，但后来运行顺利完成。

但是即使解决了卡顿问题，Android 上的滚动仍然存在一些问题。所以我不得不放弃这个。

React Native 中的 Buggy 可折叠 Header 选项卡 (Android)

Buggy Collapsible Header Tabs in React Native (Android)

android

reactjs

react-native

react-animated