将文本显示为平面列表项中的标题以分隔每个部分，React Native

Question

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

\n

\n

现在我想在每个部分的顶部渲染一个文本，以区分每个部分，标题类型（例如：专业：然后是专业的部分，医生：然后是医生的部分）\n这里是看看我的代码：

\n

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

\n

我尝试在可触摸的不透明度中执行<文本，但它在每个项目中重复。\n我将感谢您的帮助

\n

Answer 1

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

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

或者，如果您想要组级标题，请考虑使用部分列表

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