У меня есть приложение React Native с несколькими вложенными компонентами.
Компонент Cards:
async loadAllArticles() {
await this.categoryLoader();
this.setState({ isLoading: false })
}
componentDidMount() {
this.loadAllArticles();
}
render() {
if (this.state.isLoading) {
return <Loading />;
}
return (
<ScrollView contentContainerStyle={MainStyles.cardsScrollViewContainer}
style={MainStyles.cardsScrollView}
>
{Platform.OS === "web" ? (
<Filters search={false} />
) : null}
<View style={MainStyles.cardRowContainer}>
{this.state.articleGroups.map((articleGroup, index) => (
<CardRow
articleGroup={articleGroup}
count={index}
key={index}
/>
))}
</View>
</ScrollView>
);
}
Компонент CardRow:
<Fragment>
<View style={MainStyles.articleGroupContainer}>
<LinearGradient
start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
colors={['rgba(0,0,0,1)', 'rgba(0,0,0,0)']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 50,
}}
/>
<Text style={MainStyles.articleGroupText}>{this.props.articleGroup.category}</Text>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{ flexGrow: 1 }}
>
{this.props.articleGroup.data.map((article, index) => (
<Card
article={article}
key={index + "-main"}
/>
))}
</ScrollView>
</Fragment>
Теперь моя большая проблема в том, что моему компоненту Card и моим компонентам LinearGradient, по-видимому, нужно выполнить какую-то загрузку, прежде чем они станут видимыми.
Я пробовал проводить всевозможные проверки загрузки после разных событий, но Я все еще получаю этот fla sh нестилизованного контента - тогда как я бы предпочел, чтобы виджет загрузки появлялся до тех пор, пока все не будет готово для правильного рендеринга.
Есть ли способ сделать это в React Native?