javascript - 如何在 React Native 应用程序中摆脱无样式内容的闪烁

Question

我有一个带有多个嵌套组件的 React Native 应用程序。

卡片组件：

  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 组件似乎需要在它们可见之前进行某种加载。

我已经尝试在不同的事件之后进行各种加载检查，但我仍然会收到这种无样式内容的闪光——而我更愿意让加载小部件出现，直到一切都准备好正确渲染。

有没有办法在 React Native 中做到这一点？

标签： javascriptreactjsreact-native