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

Question

I have a scroll page that I built using a 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, 0, 0.2)', marginTop: 24, marginBottom: 24, width: deviceWidth * 0.9}}
                  styleFirstText={{color: '#000'}}
                  styleSecondText={{color: 'rgba(0, 0, 0, 0.7)'}}
                  icon={HelpIcon}
                />
              </Container>
            );
          }}
          onEndReached={this.loadProcedures}
          onEndReachedThreshold={0.1}
          ListFooterComponent={this.renderFooter}
        />
      </>
    );

However I have a problem, the following blocks of code are being repeated by flatlist:

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

And:

             <HelpBox
                  scene="AccreditedProvidersNetwork"
                  styleMainContainer={{display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItem: 'center'}}
                  style={{borderColor: 'rgba(0, 0, 0, 0.2)', marginTop: 24, marginBottom: 24, width: deviceWidth * 0.9}}
                  styleFirstText={{color: '#000'}}
                  styleSecondText={{color: 'rgba(0, 0, 0, 0.7)'}}
                  icon={HelpIcon}
                />

But I can't repeat them. The only block I need to repeat is this:

{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>
                ))}

I understand that the solution is to remove them from Flatlist. However, I need the entire page to have the scroll and I cannot leave these components fixed. These components need to accompany the scroll as well.

How could I make these components not repeat themselves?

Thanks!!

Answer 1

ListHeaderComponent 和 ListFooterComponent 属性。