У меня есть код, который некоторое время отображает индикатор активности, а затем отображает дорогой компонент.
Вот код для этого
class MyComponent extends React.Component{
constructor(){
this.state={isLoading:true,...someOtherStateProps}
}
componentDidMount(){
InteractionManager.runAfterInteractions(()=>{
/* Expensive Calculations*/
this.setState(ps=>({isLoading:false}))
})
}
render(){
if(this.state.isLoading)
return <ActivityIndicator/>
return <ComponentThatRendersALongListOfItems/>
}
}
Моя проблема с этим кодом заключается в том, что если присутствует ActivityIndicator, то на рендеринг Main View уходит очень много времени, даже после того, как я установил состояние isLoading в false. Если я заменю этот индикатор активности возвращаемым значением null или Loading ..., я вижу свой основной компонент с очень короткой задержкой. Я поместил 2 консольных журнала в методе рендеринга, чтобы подтвердить, было ли возвращаемое значение частью if или основной частью. Я думаю, что даже после того, как ActivityIndicator демонтирован, он все еще продолжает анимировать, что блокирует основной поток от рендеринга основного компонента. Любая помощь или совет?