ios react native mode close with swipe down(react-native-swipe-gestures)

34gzjxbg 于 12个月前发布在 iOS

关注(0)|答案(2)|浏览(123)

我正在使用滑动手势（react-native-swipe-gestures）进行模式打开和关闭。
但它不工作时，模态可见任何滑动。
我希望Modal可以向下滑动关闭。
有解决办法吗？

import React from 'react';
import { ... } from 'react-native';
import GestureRecognizer from 'react-native-swipe-gestures';

export default class SwipeModal extends Component {

 state = {
  modalVisible: false
 }

 setModalVisible = (visible) => {
  this.setState({ modalVisible: visible });
 }

 render() {
  const { modalVisible } = this.state;
  return (
   <View>
    <Modal 
     animationType="slide"
     presentationStyle="formSheet"
     visible={ modalVisible }
    >
     <GestureRecognizer
      onSwipeDown={ () => this.setModalVisible(!modalVisible) }
     >
      <Text>Swipe Down Please</Text>
     </GestureRecognizer>
    </Modal>
    <GestureRecognizer
      onSwipeUp={ () => this.setModalVisible(true) }
     >
      <Text>Swipe Up Please</Text>
     </GestureRecognizer>
   </View>
  )
}

...

字符串

ios

来源：https://stackoverflow.com/questions/66493063/react-native-modal-close-with-swipe-down-react-native-swipe-gestures

2条答案

按热度按时间

khbbv19g1#

你需要将你的视图 Package 在一个手势识别器中，并将子节点传递给它，这些子节点将可以访问Swipe手势，然后你需要给予它style={{flex: 1}}，这样它将覆盖所有屏幕，就像这样：

<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>

字符串

赞(0）回复(0）举报 12个月前

bjp0bcyl2#

不需要使用GestureRecognizer。

function SwipeDownModal() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View>
      <TouchableOpacity onPress={toggleModal}>
        <Text>Show Modal</Text>
      </TouchableOpacity>

      <Modal
        isVisible={isModalVisible}
        swipeDirection="down" // Enable swipe down to close the modal
        onSwipeComplete={toggleModal} // Handle swipe down event
        style={styles.modal}
      >
        <View style={styles.modalContent}>
          <Text>This is a swipe-down modal</Text>
          <TouchableOpacity onPress={toggleModal}>
            <Text>Close Modal</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

字符串
只需添加这个props swipeDirection=“down”和onSwipeComplete={toggleModal}

赞(0）回复(0）举报 12个月前

我来回答

ios react native mode close with swipe down(react-native-swipe-gestures)

2条答案

相关问题

热门标签

最新问答