Question

我正在使用一个具有ActivityFeed组件的React Native 0.53.3应用程序，该组件应向会员显示带有新闻，调查，微观调查和投票机会的卡片。

但是，引导时未加载微观调查。好的，所以我们的想法是，应该去汉堡包并单击SURVEYS，然后所有调查，常规调查和微观调查都应作为卡片列表加载，而只有常规调查可以加载。

当单击SURVEYS链接时，正在加载微观调查的数据，我在这里通过Reactotron确认了这一点：

但是我不清楚它为什么不加载那些特定的调查。因为这里有很多嵌套的组件，所以我遵循了最上层的组件，我相信它是ActivityFeed组件，其辅助功能为renderItem：

  renderItem = ({item, index}) => {
    const {Type, Entity} = item;
    if (Type === 'EVENT') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <EventFeedCard
            style={styles.push}
            mainActionButtonPress={() => this._gotoEvent(Entity)}
            event={Entity}
          />
        </SwippableCard>
      );
    }

    if (['SURVEY_SURVEY', 'SURVEY_BALLOT'].includes(Type)) {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <SurveyBallotFeedCard
            style={styles.push}
            survey={Entity}
            handleViewDetails={() => this._gotoSurveyBallot(Entity)}
          />
        </SwippableCard>
      );
    }

    if (Type === 'SURVEY_MICRO') {
      return (
        <SwippableCard onSwipedOut={() => this._onSwipedOut(item, index)}>
          <MicroSurvey style={styles.push} selectedSurvey={Entity} />
        </SwippableCard>
      );
    }

因此，当用户单击ACTIVITY FEED菜单内的SURVEY链接时，它应同时加载SURVEY和MICRO SURVEY，并且仅加载前者。

在这里使用renderItem辅助功能：

render() {
    if (this.props.loading && !this.state.refreshing) {
      return <Loading />;
    }

    const contentStyles =
      this.props.feed.length > 0 ? styles.content : emptyStateStyles.container;

    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={contentStyles}
          showsVerticalScrollIndicator={false}
          data={this.props.feed}
          renderItem={this.renderItem}
          keyExtractor={this._keyExtractor}
          removeClippedSubviews={false}
          onRefresh={this._onRefresh}
          refreshing={this.state.refreshing}
          ListEmptyComponent={() => (
            <EmptyState navigation={this.props.navigation} />
          )}
          scrollEventThrottle={100}
          onScroll={this._trackScroll}
        />
        {this.props.displayAlert && (
          <BottomAlert
            title={this._getAlertTitle()}
            onPress={this.props.undoSwipeAction}
            hideAlert={this.props.hideUndoAlert}
          />
        )}
      </View>
    );
  }
}

React Native：单击链接时不呈现组件

0 个答案: