为 React Native SectionList 的每个部分渲染不同的组件

Question

我正在构建分区列表。每个部分都有一个具有不同值的不同数据对象。因此，我需要为每个部分呈现不同的组件，但我很难弄清楚如何这样做。

这是我的 DATA 数组（现在有两个是假人）

const DATA = [
{
  title: "Groups",
  data: [
    {
      groupName: "Samwise",
    },
    
  ],
},
{
  title: "Noters"
    {
      userName: "Merri",
    },
  ],
},
{
  title: "Contacts",
  data: termIsContact.length ? termIsContact : contacts,
}]

SectionList 组件

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={renderItem}
  renderSectionHeader={({ section: { title } }) => (
    <View style={tw.style(`justify-center bg-red-100 pl-4`, { height: 28 })}>
      <Text style={tw`text-base font-bold`}>{title}</Text>
    </View>
  )}
/>

我如何呈现联系人列表

const Item = ({ givenName, familyName }) => (
  <TouchableOpacity
    onPress={() => toggleContact(`${givenName} ${familyName}`)}
    style={tw.style("justify-start pl-4 w-full flex flex-row items-center", {
      height: 56,
      borderBottomColor: "#aaaaaa",
      borderBottomWidth: 1,
    })}
  >
    <Avatar
      name={`${givenName} ${familyName}`}
      size={32}
      backgroundColor={"#D9F3FC"}
      labelColor={"#16ade0"}
    />

    <Text style={tw.style("text-black text-base pl-2", {})}>
      {givenName} {familyName}
    </Text>
  </TouchableOpacity>
)

const renderItem = ({ item }) => <Item familyName={item.familyName} givenName={item.givenName} />

我的想法是创建一个 <Item /> 来为每个部分呈现，但无法弄清楚如何让每个部分根据该部分数据对象中的数据呈现自己的样式。

非常感谢您

Answer 1

我找到了解决方案，希望这对以后寻找相同解决方案的人有所帮助。

sections 数组允许其中的每个对象接受一个 prop renderItem 因此您可以为每个部分创建一个独特的组件。

我的组件

const NotersItem = ({ userName }) =>
searchTerm && !termIsUser.length ? (
  <></>
) : (
  <TouchableOpacity
    onPress={() => toggleContact(`${userName}`)}
    style={tw.style("justify-start pl-4 w-full flex flex-row items-center", {
      height: 48,
      borderBottomColor: "#aaaaaa",
      borderBottomWidth: 1,
    })}
  >
    <Avatar name={`${userName}`} size={32} backgroundColor={"#D9F3FC"} labelColor={"#16ade0"} />

    <Text style={tw.style("text-black text-base pl-2", {})}>{userName}</Text>
  </TouchableOpacity>
)

  const renderNotersItem = ({ item }) => <NotersItem userName={item.userName} />

节数组

  const DATA = [
{
  title: "Groups",
  renderItem: renderGroupItem,
  data: termIsGroup.length ? termIsGroup : groups,
},
{
  title: "Highnoters",
  renderItem: renderNotersItem,
  data: termIsUser.length ? termIsUser : users,
},
{
  title: "Contacts",
  renderItem: renderContactItem,
  data: termIsContact.length ? termIsContact : contacts,
},

]

SectionList 组件

      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ section: { renderItem } }) => <View>{renderItem}</View>}
      renderSectionHeader={({ section }) => (
        <View style={tw.style(`justify-center bg-red-100 pl-4`, { height: 28 })}>
          <Text style={tw`text-base font-bold`}>{section.title}</Text>
        </View>
      )}
    />

有什么问题欢迎留言！

为 React Native SectionList 的每个部分渲染不同的组件

Render different components for each section of React Native SectionList

render

reactjs

react-native

react-native-sectionlist