Firebase React Native-当所有组件都在初始屏幕内渲染时，如何隐藏初始屏幕？

我有一个从firebase获取数据的函数，

SplashScreen.hide（）

在获取完成并设置状态时被调用。问题是，当调用

SplashScreen.hide（）

时，组件在出现之前仍在加载1-2秒，是否有更好的方法确保组件已经渲染？呈现的项目取决于状态

cardComponents

，设置该状态时，将呈现卡

另外，我正在使用

react原生启动屏幕

fetchCards = () => {
    let cardRef = firebase.firestore().collection('tblcard')
    let itemRef = firebase.firestore().collection('tblitem')
    let cards = []
    let items = []
    let cardComponents = []
    let today = new Date()
    today.setHours(0, 0, 0, 0)

    cardRef.where('date', '=', today).get().then(function(cardSnapshot) {
      cardSnapshot.forEach(function(doc) {
        cards[doc.id] = doc.data()
      })

      itemRef.get().then(function(itemSnapshot) {
        itemSnapshot.forEach(function(doc) {
          items[doc.id] = doc.data()
        })

        cards.forEach(function(card, index) {
          let id = index
          let item1 = items[card.item1]
          let item2 = items[card.item2]
          let question = card.question.replace('?', ',') + '\n' + item1.item_name + ' o ' + item2.item_name + '?'

          cardComponents.push({id: id, image1: item1.image_url, image2: item2.image_url, question: question})
        })

        this.setState({cardComponents: cardComponents})
        this.setState({cards: cards})
        this.setState({items: items})

        SplashScreen.hide()
      }.bind(this))
    }.bind(this))
}

render () {
  {this.state.cardComponents}
}

---

这是因为调用

setState

本质上是异步的。因此，当设置状态后

SplashScreen.hide（）

时，您的状态尚未正确更新。您有两种选择：

使用生命周期方法componentDidUpdate检测您的状态是否已更新：

  componentDidUpdate(prevProps, prevState) {
    if (prevState.cardComponents !== this.state.cardComponents) {
      SplashScreen.hide();
    }
  }

使用

setState

方法中提供的回调：

this.setState({cardComponents: cardComponents}, () => { SplashScreen.hide(); })

---

这是因为调用

setState

本质上是异步的。因此，当设置状态后

SplashScreen.hide（）

时，您的状态尚未正确更新。您有两种选择：

使用生命周期方法componentDidUpdate检测您的状态是否已更新：

  componentDidUpdate(prevProps, prevState) {
    if (prevState.cardComponents !== this.state.cardComponents) {
      SplashScreen.hide();
    }
  }

使用

setState

方法中提供的回调：

this.setState({cardComponents: cardComponents}, () => { SplashScreen.hide(); })