时间戳

首页 > 解决方案 > 拉动 Scrollview 以显示 View - React Native

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

问题描述

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

pullToRevealView

我已经能够下拉以显示隐藏的输入，但是由于滚动视图的 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 特定的下拉显示视图

标签： reactjsreact-nativeuiscrollview

解决方案

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

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

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

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

推荐阅读