拉动滚动视图以显示视图 - React Native

Question

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

我已经能够下拉以显示隐藏的输入，但是因为滚动视图的 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 帖子对参考很有用，但它是 IOS 特定的Pull down to show view

Answer 1

我通过使用contentOffset和不使用任何动画解决了这个问题。我需要确保滚动视图至少是手机的大小windowHeight，然后用于contentOffset将滚动视图的初始 y 值推Scrollview到标题的大小

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

Flatlist该解决方案也适用于 a 。

需要注意的一件事是contentOffset特定ios的道具