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

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

已关闭21天前。

请参阅下面的视频以了解其功能。

https://streamable.com/49k8p

[当您从下至上滑动手指时，会打开一个包含其他视频的面板，我们只是想了解它叫什么或它是什么库？我们根本无法在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包装视频播放器，并用absolute位置的Animated.View包装面板。让我知道您是否不懂