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

Question

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

这是我的DATA数组（现在有两个是虚拟的）

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

部分列表组件

<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,
},

]

部分列表组件

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

有什么问题请评论！