异步呈现本地响应

我有一个二维码扫描器,基于服务器的响应,我想用不同的背景色显示一个模式!

我用过 react-native-qrcode-scanner 和 react-native-modalbox .

应用程序JS:

  render() {
    return (
      <View style={styles.container}>
        <Header headerText="Scan 😁" />

        <View style={styles.cameraContainer}>
          <QRCodeScanner
            ref={node => {
              this.scanner = node;
            }}
            onRead={this.onRead.bind(this)}
            cameraStyle={{ height: "100%" }}
          />
        </View>

        {this.renderModal()}
      </View>
    );
  }

然后我们有了 OnRead()时 功能是:

onRead(e) {
    // send request to server and receive the response!
    switch (msg from server){
      case "IN": {
        userStatus = "1";
      }

      case "OUT": {
        userStatus = "0";
      }

      case "Error": {
        userStatus = "-1";
      }

    this.refs.myModal.open();
}

最后是 伦德莫达尔() 以下内容:

renderModal() {
    switch (userStatus) {
      case "1": {
        (modalBackgroundColor = "#90EE90"), (modalText = "In");
      }

      case "0": {
        (modalBackgroundColor = "#87CEFA"), (modalText = "Out");
      }

      case "-1": {
        (modalBackgroundColor = "#FF0000"), (modalText = "Error");
      }
    }

    return (
      <Modal
        style={styles.modalStyle}
        position={"center"}
        ref={"myModal"}
        backdropColor={modalBackgroundColor}
        onClosed={() => {
          this.scanner.reactivate();
        }}
      >
        <Text style={styles.text}>{modalText}</Text>
      </Modal>
    );
  }

问题是我的 onRead() 是异步函数,但 renderModal() 在我收到回复之前呈现! 有什么解决办法吗?

事先谢谢!