异步渲染 react-native

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，然后将函数的结果更改为 IsLoading: False，并且仅当 IsLoading 设置为 False 时，进行渲染，当它设置为 True 时，显示一些占位符，告知用户正在处理数据。

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

编辑：

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

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

在你的异步函数的返回中运行 正在加载（假） 当您启动实际读取时，运行 isLoading(true)。