Javascript 模态组件使用

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

我编写了一个示例代码来尝试它的工作原理：

从“反应本机模态”导入模态

导出默认类ModalTester扩展组件{
建造师（道具）{
超级（道具）；
此.state={
反馈：“，
}
状态={
isModalVisible:错误
};
}
检查（）{
让ctrl=true；
如果（ctrl==true）{
this.setState（{isModalVisible:！this.state.isModalVisible}）；
}
否则{
这个.stopConnection（）；
}
}
停止连接（）{
log（“停止连接”）
}
render（）{
返回(
this.check（）}/>
检查您的级别：
this.setState（{反馈：'N'，isModalVisible:false}），this.stopConnection（）}/>
);
}
}

基本上，当单击stop按钮时，我会用图像显示此模式组件，当用户单击图像时，我会将变量反馈设置为N，然后进入stopConnection功能（我只插入控制台日志以尝试该功能）

我不明白为什么这个图像不可读取。所以我不会在单击函数stopConnection时使用它

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

---

我该怎么办？谢谢你

你把一个名为

this.state的类字段

和一个名为

state

的本地构造函数变量混合在一起。看看你的状态你应该在构造函数中绑定

check

this.check=this.check.bind（this）@techouse所以我应该把state={ismodalvisible..}在构造函数之外？？您应该具有组合状态，如

this.state={feedback:，isModalVisible:false，}
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>
    );
  }
}