Question

试图围绕我如何做到这一点......

我在React Native中有一个视图，我希望根据来自服务器的某些信息显示/隐藏（使用firebase ......并不重要）。我可以成功地返回一个值，但是如果我添加一个确定要返回它的数据库调用，它就不起作用。

问题是查询返回的速度很快，但在视图加载时可能无法准确返回。因此，我认为当下面的代码中的If循环最终运行时，为时已晚。 有一种方法，一旦我从数据库获得了我需要的信息，无论是否显示视图，还是重新加载视图，或重新加载它，所以视图将显示数据库是否返回

我还应该添加我正在查询数据库的内容，并将this.props中的一些信息传递给组件

我目前的逻辑是（这可能不是语法，但我认为你会明白这个问题）：

//create byte buffer
            byte[] buffer = new byte[1024];
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            ZipOutputStream zout = new ZipOutputStream(bos);

            zout.putNextEntry(new ZipEntry("first.pdf"));
            int length;
            //con.getInputStream() is the inputstream
            while((length = con.getInputStream().read(buffer)) > 0)
            {
                zout.write(buffer, 0, length);
            }
            zout.closeEntry();
            resp.setContentType(CONTENT_TYPE_ZIP);
            resp.setHeader("Content-Disposition", "inline;filename=first.zip");
            resp.getOutputStream().write(bos.toByteArray());
            pdfMsOfficeCacheHeaderUtil.process(request, resp);
            resp.flushBuffer();                
            zout.flush();
            zout.finish();
            zout.close();
            bos.close();

Answer 1

您应该使用 state 对象来更新视图。

因此，当服务器请求恢复时，您将通过 setState（）更新组件状态，组件将重新绘制。

returnOtherComponent() {
    if (this.state.DatabaseIsTrue) {
        return (
            <View>
                <Text> HELLO! </Text>
            </View>
        );
    } else {
        return {}
    }
}

componentDidMount: function() {
    /*
      This is just psuedo code, as the web query is a big block of text that is uneeded
     */
     DatabaseIsTrue = Returned True from Web

    this.setState({
        DatabaseIsTrue: DatabaseIsTrue
    })
}

render(){
   return(
    <View>
      {this.returnOtherComponent()}
    </View>
   );
}

Answer 2

您可以在加载数据之前使用ActivityIndicator。

constructor(props){
  super(props)
  this.state = {
    loading: true,
    listing: {},//this object contains list of data you are gonna load from server
  }

  this._decideContent = this._decideContent.bind(this);
}

_fetchFunction(){
  fetch(...)
  .then(...)
  .then(...)
  .then((response) => {
    this.state = {
      ...this.state,
      loading: false,//now that data is loaded, we don't need the spinner anymore
      listing: {data you fetched from server},
    }
  })
}

//if data is loaded, this function returns your component, if not, it returns an activity indicator
_decideContent(){
  let loading = this.state.loading;
  if(loading){
    this._fetchData();//call the function that fetches data
    return(
      <ActivityIndicator animating={loading} />
    )
  }
  else{
    return(
      <YourComponentContaingData listing = {this.state.listing} />
    )
  }
}

render(){
  return(
    {this._decideContent()}
  )
}

初始渲染后更新视图

2 个答案: