reactjs - 拉动 ScrollView 以显示 View - React Native

Question

我正在尝试在 React Native 中构建类似于 IMessage 和 WhatsApp 标题的内容，用户可以向下拉以显示标题中的搜索栏。

我已经能够向下拉以显示隐藏的输入，但由于 ScrollView 的 y 值在拉动时变为负数，因此它会弹回到 y = 0 并防止输入粘在顶部。我尝试使用 translateY 和 scaleY 来显示隐藏的输入。

class List extends Component {

  scrollY = new Animated.Value(0)

  render() {
    const translateY = this.props.scrollY.interpolate({
      inputRange: [ -50, 0 ],
      outputRange: [ 50, 0 ],
      extrapolate: 'clamp',
    })

   return (
    <>
       <Animated.View style={[
        styles.container,
        { transform: [ { translateY } ] },
       ]}>
          <Input />
       </Animated.View>

       <Animated.ScrollView
         onScroll={Animated.event(
           [ { nativeEvent: { contentOffset: { y: this.scrollY } } } ],
           { useNativeDriver: true }
          )}
         scrollEventThrottle={16}
       >
        {...}
       </Animated.ScrollView>
     </>
   )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    width: windowWidth,
    height: 50,
    position: 'absolute',
    top: -50,
    zIndex: -99,
  },
});

我发现这篇 Stack Overflow 帖子很有引用值(value)，但它是 IOS 特定的 Pull down to show view

Answer 1

我通过使用 contentOffset 解决了这个问题，并且没有任何动画。我需要确保 ScrollView 至少是手机 windowHeight 的大小，然后使用 contentOffset 推送 Scrollview 的初始 y 值到标题的大小

      <ScrollView
        ListHeaderComponent={() => (
          <Header headerHeight={hiddenHeaderHeight} />
        )}
        contentContainerStyle={{ minHeight: windowHeight }}
        contentOffset={{ y: hiddenHeaderHeight }}
        ...

此解决方案也适用于 Flatlist。

需要注意的一点是 contentOffset 是 ios 特定的 prop