React Native - 当所有组件都在其中渲染时如何隐藏启动画面？答案

【问题标题】：React Native - How to hide splash screen when all components have been been rendered inside it?React Native - 当所有组件都在其中渲染时如何隐藏启动画面？
【发布时间】：2018-10-28 19:54:42
【问题描述】：

我有一个从 firebase 获取数据的函数，当获取完成并设置状态时调用SplashScreen.hide()。问题是，当调用SplashScreen.hide() 时，组件在它们出现之前仍在加载 1 - 2 秒，是否有更好的方法来确保组件已经被渲染？正在渲染的项目取决于状态 cardComponents，设置后将渲染卡片。

附：我正在使用react-native-splash-screen

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}
}

【问题讨论】：

标签： firebase react-native

【解决方案1】：

这是因为调用setState 本质上是异步的。所以当SplashScreen.hide()设置你的状态后，你的状态还没有正确更新。你有两个选择：

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

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

使用setState 方法中提供的回调：

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

【讨论】：