父平面列表项之间的反应原生显示平面列表组件

Posted 2023-02-16

【中文标题】父平面列表项之间的反应原生显示平面列表组件

【英文标题】：React-native display Flatlist Component between Parent Flatlist Items

【发布时间】：2019-11-08 12:58:58

【问题描述】：

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

在此链接中，我绘制了屏幕外观。点击按钮 B2 将得到一个列表并显示在 Parent FlatList item See Screens Here 之间

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

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

尝试像上述解决方案一样构建您的代码。它应该可以解决您的问题。

【讨论】：

肯定会试试这个。