拉动滚动视图以显示视图 - React Native [英] Pull Scrollview to reveal View - React Native

问题描述

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

I'm trying to build something similar to IMessage's and WhatsApp's header in react native, where users can pull down to reveal a search bar in the header.

我已经能够下拉以显示隐藏的输入，但是因为滚动视图的 y 值在下拉时变为负值，它将反弹回 y = 0 并防止输入粘在最佳.我尝试使用 translateY 和 scaleY 来显示隐藏的输入.

I have been able to pull down to reveal a hidden input, but because the scrollview's y value becomes negative on pull, it will bounce back to y = 0 and prevent the input from sticking to the top. I have tried using both translateY and scaleY to reveal the hidden input.

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向下显示视图

I found this Stack Overflow post that has been useful to reference but it is IOS specific Pull down to show view

推荐答案

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

I solved this by using contentOffset and without any animations. I needed to make sure the scrollview was at least the size of the phone's windowHeight and then used contentOffset to push the initial y value of the Scrollview to the size of the header

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

此解决方案也适用于 Flatlist.

This solution works for a Flatlist as well.

需要注意的一点是 contentOffset 是一个 ios 特定的道具

One thing to note is contentOffset is an ios specific prop

这篇关于拉动滚动视图以显示视图 - React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！