Question

我通常可以打开我的模态。但是，当我尝试关闭它时，必须多次单击“后退”按钮，以使模式关闭。这与Modal的工作方式有关吗？

import Modal from "react-native-modals";

这是我打开模态的方式

<TouchableOpacity
  onPress={() => {
    this.setState(
      {
        visible: true,
        latitude: data[1],
        longitude: data[2]
      },
      () => {
        console.log(
          "here should be the coords I want",
          this.state.latitude,
          this.state.longitude
        );
      }
    );
  }}
>
  <Text>Open Modal</Text>
</TouchableOpacity>;

这是我关闭它的方式

<Modal visible={this.state.visible}>
  <TouchableOpacity
    onPress={() => {
      this.setState(
        {
          visible: false
        },
        () => {
          console.log("visible should be falsey now", this.state.visible);
        }
      );
    }}
  >
    <AntDesign style={styles.back} name="back" size={50} color="pink" />
  </TouchableOpacity>
  ;
</Modal>;

Answer 1

看起来您正在使用ant设计库吗？您可以这样做。

import { Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }

Answer 2

我找到了问题，这是TouchableOpacity的问题。我是从“ react-native-gesture-handler”导入它的。更改为

后

从“ react-native”导入{TouchableOpacity};

解决了该问题。

模式未在React Native中关闭

2 个答案: