React Native - 当用户移动它时展开折叠的标题答案

【问题标题】：React Native - Unfold collapsed header when user moves thisReact Native - 当用户移动它时展开折叠的标题
【发布时间】：2021-07-10 23:42:52
【问题描述】：

我有一个在平面列表中滚动时折叠的标题，我使用以下代码实现了这一点

 const positionY = React.useRef(new Animated.Value(0)).current;

  const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: positionY } } }],
    {
      useNativeDriver: true,
    }
  );

  const translateY = positionY.interpolate({
    inputRange: [0, headerHeight],
    outputRange: [0, -(headerHeight - 64)],
    extrapolate: 'clamp',
  });

snack whit 完整代码https://snack.expo.io/@gustperz/collapsible-header

我希望能够在用户下拉粘性标题时按需展开标题，而无需滚动列表。

【问题讨论】：

标签： react-native react-native-flatlist react-animated

【解决方案1】：

我做了双重动画通过滚动+抽屉行为

 const beyondLength = 100000

 const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: positionY.current } } }],
    { useNativeDriver: true },
  );

  const translateY = positionY.current.interpolate({
    inputRange: [0, headerHeight + 100, beyondLength, beyondLength+1, beyondLength+150],
    outputRange: [
      0,
      -(headerHeight - 64),
      -(headerHeight - 64),
      -(headerHeight - 65),
      0,
    ],
    extrapolate: 'clamp',
  });

  const panResponder = React.useMemo(
    () =>
      PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderMove: (event, gestureState) => {
          positionY.current.setValue(gestureState.dy + beyondLength);
        },
      }),
    [],
  );

expo

【讨论】：