为React Native SectionList的每个部分呈现不同的组件

Question

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

这是我的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

我找到了解决方案，希望这对将来寻找同样问题的人有帮助。

section数组允许其中的每个对象使用一个道具renderItem，这样你就可以为每个section创建一个独特的组件。

<<p>我的组件/strong>

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

<<p>节数组/strong>

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

)<<p>SectionList组件/strong>

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

有任何问题请评论!