Как избавиться от fla sh нестилизованного контента в приложении React Native - PullRequest
0 голосов
/ 08 июля 2020

У меня есть приложение 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...