Question

我有一个二维码扫描器，根据服务器的响应，我想显示一个具有不同背景色的模态！

我使用了react-native-qrcode-scanner和react-native-modalbox。

App.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（）：

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()！有解决办法吗？

谢谢！

Answer 1

作为异步函数的一般做法，我在渲染方面的方法是在本地状态中保存IsLoading：True，然后将Function的结果更改为IsLoading：False，仅将IsLoading设置为False时，进行渲染，而将IsLoading设置为True时，显示一些占位符，以向用户传达正在处理数据的信息。

这会将反馈反馈给用户，并使其具有响应性。

编辑：

isLoading(isLoading = true){
this.setState({isLoading})
}

{this.state.isLoading ? <div>placeholder</div> : this.renderModal()}

并在异步函数的返回内部运行 isLoading（false）当您启动实际读取时，运行 isLoading（true）。

异步渲染本机

1 个答案: