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

Question

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

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

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

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

}

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