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

【问题标题】：How to render a specific element only once in a flatlist - React Native如何在平面列表中仅渲染一次特定元素 - React Native
【发布时间】：2023-04-04 19:43:01
【问题描述】：

我有一个使用 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}
        />
      </>
    );

但是我有一个问题，flatlist 正在重复以下代码块：

               {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', 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}
                />

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

{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 中删除。但是，我需要整个页面都有滚动，我不能让这些组件固定。这些组件也需要伴随滚动。

我怎样才能让这些组件不重复自己？

谢谢！！

【问题讨论】：

标签： javascript reactjs react-native infinite-scroll react-native-flatlist

【解决方案1】：

ListHeaderComponent 和 ListFooterComponent 属性。

【讨论】：