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

debugcn 发表于 Dev

默特·阿尔努阿米（Mert Alnuaimi）

请看下面的视频，看看有什么功能。

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

对不起，新手问题！

Abdumutal Abdusamatov

我不知道任何库，但是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。让我知道你是否不懂

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。