reactjs - 为 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 数组允许其中的每个对象接受一个属性 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>
      )}
    />

有什么问题欢迎留言!