反应本机显示父平面列表项之间的平面列表组件

Question

在一个反应原生应用程序上工作，我必须在FlatList中列出自定义项目。此自定义项包含两个按钮。单击每个项目将获得有关该单击项目的一些数据，并将在单击的项目和下一个项目之间显示另一个带有自定义项目的FlatList。

在此链接中，我绘制了屏幕外观。单击按钮 B2 将获得一个列表并显示在父项FlatList项之间 在此处查看屏幕

我已经尝试过使用SectionList，其中我使用两个按钮显示我的第一个列表数据，HeadersSectionListCustom Component。单击任何，将获得另一个项目列表，并将这些数据分配给单击的section标题数据。这些数据将作为子项显示在选定的Header部分。但它没有像预期的那样工作，所以寻找一些替代方式与FlatList.

Answer 1

您的主要组件如下所示：

export default class MainClass from React.Component{
render(){
<FlatList
data={items}
renderItem={({item}) => <ListItem/>}
/>
}    
}

自定义列表项组件如下所示：

export default class ListItem from React.Component{
render(){
<View>
<View>
//your card view which will contain B1 and B2 button
</View>
//below views will render conditionally
<FlatList/> //if B2 button clicked then show fetched list
<CalendarWidget/> //if B1 button clicked then show calendar data 
</View>
}  
}

尝试像上面的解决方案一样构建代码。它应该解决你的问题。