React Native-当所有组件都在启动屏幕中渲染时，如何隐藏启动屏幕

Question

我有一个从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}
}

Answer 1

这是因为调用setState本质上是异步的。因此，当SplashScreen.hide()设置完您的状态后，您的状态尚未正确更新。您有两个选项：

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

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

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

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