如何在平面列表中仅渲染一次特定元素-React Native

问题描述

我有一个使用React Native Flatlist构建的滚动页面。

 return (
      <>
        <SearchHeader placeholder="Buscar procedimento" getValueUserSearch={this.getInfoSearch} />
        <FlatList
          keyExtractor={procedure => procedure.id}
          data={procedures}
          renderItem={_ => {
            return (
              <Container style={styles.MainContainer}>
                {procedures.length ? (
                  <Text bold style={styles.TitleSearch}>
                    Exibindo todos os resultados
                  </Text>
                ) : (
                  <Text bold style={styles.TitleSearch}>
                    Busque pelo procedimento
                  </Text>
                )}
                {procedures.map(procedure => (
                  <ArrowBox key={procedure.id} onPress={() => RootNavigation.navigate('ProcedureDetails',{procedure})}>
                    <Text bold style={styles.ProcedureTitle}>
                      {procedure.name}
                    </Text>
                    {!!procedure.synonyms.length && (
                      <>
                        <Text bold style={styles.ProcedureSynonymTitle}>
                          Sinônimos
                        </Text>
                        <View style={styles.ProcedureSynonymOptionsContainer}>
                          {procedure.synonyms.map(synonym => <Text style={styles.ProcedureSynonymOption} key={synonym}>{synonym}</Text>)}
                        </View>
                      </>
                    )}
                  </ArrowBox>
                ))}
                <HelpBox
                  scene="AccreditedProvidersNetwork"
                  styleMainContainer={{display: 'flex',flexDirection: 'row',justifyContent: 'center',alignItem: 'center'}}
                  style={{borderColor: 'rgba(0,0.2)',marginTop: 24,marginBottom: 24,width: deviceWidth * 0.9}}
                  styleFirstText={{color: '#000'}}
                  styleSecondText={{color: 'rgba(0,0.7)'}}
                  icon={HelpIcon}
                />
              </Container>
            );
          }}
          onEndReached={this.loadProcedures}
          onEndReachedThreshold={0.1}
          ListFooterComponent={this.renderFooter}
        />
      </>
    );

但是，我遇到问题时，清单列表正在重复以下代码块：

               {procedures.length ? (
                  <Text bold style={styles.TitleSearch}>
                    Exibindo todos os resultados
                  </Text>
                ) : (
                  <Text bold style={styles.TitleSearch}>
                    Busque pelo procedimento
                  </Text>
                )}

并且：

             <HelpBox
                  scene="AccreditedProvidersNetwork"
                  styleMainContainer={{display: 'flex',0.7)'}}
                  icon={HelpIcon}
                />

但是我不能重复它们。我需要重复的唯一一个步骤是：

{procedures.map(procedure => (
                  <ArrowBox key={procedure.id} onPress={() => RootNavigation.navigate('ProcedureDetails',{procedure})}>
                    <Text bold style={styles.ProcedureTitle}>
                      {procedure.name}
                    </Text>
                    {!!procedure.synonyms.length && (
                      <>
                        <Text bold style={styles.ProcedureSynonymTitle}>
                          Sinônimos
                        </Text>
                        <View style={styles.ProcedureSynonymOptionsContainer}>
                          {procedure.synonyms.map(synonym => <Text style={styles.ProcedureSynonymOption} key={synonym}>{synonym}</Text>)}
                        </View>
                      </>
                    )}
                  </ArrowBox>
                ))}

我了解解决方案是将其从Flatlist中删除。但是，我需要整个页面都具有滚动条，并且无法固定这些组件。 这些组件也需要伴随滚动。

如何使这些组件不再重复？

谢谢！

解决方法

ListHeaderComponent和ListFooterComponent属性。