如何在React Native或Swift中实现IG TV底部滑动面板？

Question

请观看下面的视频了解哪个功能。

当您从下往上滑动手指时，会打开一个包含其他视频的面板，我们只想了解它叫什么或它是什么库？我们根本找不到相关资源来在我们的 React Native 应用程序中实现类似的功能。

抱歉新手问题！

Answer 1

我不知道任何库，但是 react-native-gesture-handler 很容易实现！这是我在之前的项目中所做的：

let onGestureEvent = Animated.event([
  {
      nativeEvent: {
         translationY: height,
         },
  },
]);

let translateY = new Animated.Value(-300)

let onHandlerStateChange = ({nativeEvent}) => {
    if (nativeEvent.oldState === State.ACTIVE) {
      if (nativeEvent.translationY > 0) {
        Animated.spring(translateY, {toValue: 300}).start(() => {
          isExpanded = false;
          height.setOffset(0);
          height.setValue(0);
        });
      } else {
        Animated.spring(translateY, {toValue: -300}).start(() => {
          isExpanded = true;
          height.setOffset(-300);
          height.setValue(0);
        });
      }
    }
  };

return (<>
   <PanGestureHandler 
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}>
      <YourVideoPlayer/>
   </PanGestureHandler>

   <Animated.View style={[styles.row, {transform: [{translateY}]}]}>
      <YourVideosComponent/>
   </Animated.View>
</>)

您必须用 PanGestureHandler 包裹您的视频播放器，并用位于 Animated.View 的 absolute 包裹您的面板。如果您不明白，请告诉我

如何在React Native或Swift中实现IG TV底部滑动面板？

How to achieve the IG TV bottom swipe panel in React Native or Swift?

swipe

swift

react-native