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

Posted 2023-02-16

【中文标题】为 React Native SectionList 的每个部分渲染不同的组件

【英文标题】：Render different components for each section of React Native SectionList

【发布时间】：2021-10-15 08:25:02

【问题描述】：

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

这是我的 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 /> 来为每个部分呈现，但只是无法弄清楚如何让每个部分从该部分数据对象中的数据呈现自己的样式。

非常感谢您

【参考方案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>
      )
    />

有任何问题欢迎评论！