javascript - 模态组件使用

Question

我正在尝试使用模态组件来管理应用程序中的警报。

我写了一个示例代码来尝试它是如何工作的：

从“react-native-modal”导入模态；

export default class ModalTester extends Component {
    constructor(props){
        super(props);
        this.state = {
            feedback: "",
        }
        state = {
          isModalVisible: false
        };
    }

  check() {
      let ctrl = true;
        if (ctrl == true){
        this.setState({ isModalVisible: !this.state.isModalVisible });
      }
    else {
        this.stopConnection();
    }
  }

  stopConnection() {
    console.log("stop Connection.")
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Button title="Stop" onPress={() => this.check()} />
        <Modal isVisible={this.state.isModalVisible} style={alignItem = "center"}>
          <View style={{ flex: 1, alignItems: "center"}}>
            <Text>Check your level:</Text>
            <Image 
                style={{width:30, height:30}} 
                source={require('../Image/logo.png')}
                onPress={() => this.setState({feedback: 'N', isModalVisible: false}),this.stopConnection() }/>
          </View>
        </Modal>
      </View>
    );
  }
}

基本上我会在单击停止按钮时显示带有图像的模态组件，并且当用户单击图像时将变量反馈设置为 N 并进入 stopConnection 函数（我只插入控制台日志来尝试该功能）。

我不明白为什么图像无法点击。所以当它被点击时我不会进入函数 stopConnection 。

该组件也保持打开状态，我尝试使用 isModalVisible: false 在单击图像时关闭组件，但它不起作用。

我能怎么做？谢谢

标签： javascriptreact-native