我想通过向下滑动来关闭ReactNative的Modal

bwitn5fc  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(174)

我希望能够向下滑动并关闭全屏模式。
我尝试了React-native-modal,但它不适合我的应用程序。
我尝试了在this page上使用GestureRecognizer的方法,并且能够关闭模态,但是模态没有根据滑动进行上下移动,这对我来说并不理想。我想用一个动画关闭全屏模式,就像在presentationStyle中指定pageSheet时一样。
如果你知道更多的话,请告诉我怎么做。

const RecordingModal = ({ open, close }) => {
  return (
    <Modal
      animationType="slide"
      onSwipeComplete={close}
      presentationStyle="fullscreen"
      visible={open}
    >
      <SafeAreaView style={styles.modal}>
        <Text>aaaa</Text>
        <Text>aaaa</Text>
      </SafeAreaView>
    </Modal>
  );
};
enyaitl3

enyaitl31#

试试这边

<GestureRecognizer
  style={{flex: 1}}
  onSwipeUp={ () => this.setModalVisible(true) }
  onSwipeDown={ () => this.setModalVisible(false) }
>
  <Modal 
    animationType="slide"
    presentationStyle="formSheet"
    visible={ modalVisible }
  >
    <Text>Swipe Down Please</Text>
  </Modal>
  <Text>Swipe Up Please</Text>
</GestureRecognizer>

您也可以使用react-native-swipe-modal-up-down

import SwipeUpDownModal from 'react-native-swipe-modal-up-down';

  let [ShowComment, setShowModelComment] = useState(false);
  let [animateModal, setanimateModal] = useState(false);

<SwipeUpDownModal
  modalVisible={ShowComment}
  PressToanimate={animateModal}
  //if you don't pass HeaderContent you should pass marginTop in view of ContentModel to Make modal swipeable
  ContentModal={
    <View style={styles.containerContent}>
      <FlatList
        data={data}
        renderItem={({item, index}) => (
          <item key={index} Data={item} />
        )}
        keyExtractor={item => item.id}
      />
    </View>
  }
  HeaderStyle={styles.headerContent}
  ContentModalStyle={styles.Modal}
  HeaderContent={
    <View style={styles.containerHeader}>
          <Button 
              Title={"Press Me"}
              onPress={() => {
                setanimateModal(true);
              }}
           />
    </View>
  }
  onClose={() => {
      setModelComment(false);
      setanimateModal(false);
  }}
/>

const styles = StyleSheet.create({
  containerContent: {flex: 1, marginTop: 40},
  containerHeader: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    backgroundColor: '#F1F1F1',
  },
  headerContent:{
    marginTop: 0,
  },
  Modal: {
    backgroundColor: '#005252',
    marginTop: 0,
  }
});
n1bvdmb6

n1bvdmb62#

您可以使用react-native-modalreact-native-reanimated加上react-native-gesture-handler来实现此行为。
下面是一个例子:

import Animated, {
  runOnJS,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';

import Modal from 'react-native-modal'

const SwipeableModal = () => {

   const translateY = useSharedValue(0);

   const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: _ => {
      if (onClose) {
        // replace `onClose` with your close function
        runOnJS(onClose)();
      }
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: translateY.value,
        },
      ],
    };
  });
   

  return (

    <Modal isVisible={isVisible}>
    <GestureHandlerRootView style={{flex:1}}>
       <PanGestureHandler onGestureEvent={gestureHandler}>
         <Animated.View style={[styles.myStyle, animatedStyle]}
           {.... your modal UI here}
         </Animated.View>
       </PanGestureHnadler>
    </GestureHandlerRootView>
  </Modal>

  )

}

export default SwipeableModal;

相关问题