在 flatlist 项目中将文本显示为 header 以分隔每个部分，React native

Question

我有一个平面列表，它呈现从数据库中获取的数据，所以我确保项目按类型排序。

现在我想在每个部分的顶部呈现一个文本以区分每个部分，header 某种（例如：专业：然后是专业的部分，医生：然后医生部分）看看我的代码：

<FlatList
            data={this.state.data.sort((a, b) => a.type === 'spécialité' ? -1 : 1)}
            keyExtractor={item => { return item.id }}
            renderItem={({ item }) => 
              <TouchableOpacity onPress={() =>NavigationService.navigate('Où ?',{lien: item.lien, choix: c}) }> 
              {item.type == 'spécialité' && (
                
                <Highlighter
                  highlightStyle={{ backgroundColor: '#FFC617' }}
                  searchWords={[this.searchedText]}
                  textToHighlight={item.name}
                  style={{paddingLeft:10,color: '#2c3e50',height:42,backgroundColor: 'white'}}
                />
                
              )}
              {item.type == 'Tag' && (
                <Highlighter
                highlightStyle={{ backgroundColor: '#FFC617' }}
                searchWords={[this.searchedText]}
                textToHighlight={item.name}
                style={{paddingLeft:10,color: '#2c3e50',height:42,backgroundColor: 'white'}}
              />
                
              )}
              {item.type == 'Médecin' && (
                <View style={{ backgroundColor: 'white', flexDirection: 'row',flexWrap: 'wrap',height:80 }}>
                <Image style={{ height: 50, width: 80,marginTop:5, borderRadius:5 }} source={{ uri:getImageFromApi( item.image ) }} />
                <View style={{ flexDirection: 'column'}}>
                <Text style={{ fontWeight:'bold',color:'#2980b9' }}> {item.name} </Text>
                <Text style={{color: '#2c3e50'}}> {item.speciality} </Text>
                </View>
              </View>)}
              {item.type == 'Clinique' && (
                
                <View style={{ backgroundColor: 'white', flexDirection: 'row',flexWrap: 'wrap',height:80 }}>
                <Image style={{ height: 50, width: 80,marginTop:5, borderRadius:5 }} source={{ uri:getImageFromApi( item.image ) }} />
                <View style={{ flexDirection: 'column'}}>
                <Text style={{ fontWeight:'bold',color:'#2980b9' }}> {item.name} </Text>
                <Text style={{color: '#2c3e50'}}> {item.speciality} </Text>
                </View>
              </View>)}
              
            </TouchableOpacity>}
            ItemSeparatorComponent={this.renderSeparator}
          />)}

我尝试在我的可触摸不透明度中执行

Answer 1

您可以使用 ListHeaderComponent 和 ListFooterComponent 显示文本，甚至呈现自定义组件。

 <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ListHeaderComponent={()=><Text>1231312</Text>}
        ListFooterComponent={()=><Text>1231312</Text>}
      />

或者，如果您想要组级别 headers，请考虑使用分区列表

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Item title={item} />}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>

Answer 2

你可以使用 ListHeaderComponent prop

阅读文档here

一个例子是这样的：

<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    ListHeaderComponent={() => {
      return (<Text>Header</Text>)
    }}
 />

在 flatlist 项目中将文本显示为 header 以分隔每个部分，React native

Display text as a header in flatlist items to seperate each part, React native

react-native

react-native-flatlist