Реагирующее отображение компонента Flatlist между родительскими элементами Flatlist - PullRequest
Новая
       24

Реагирующее отображение компонента Flatlist между родительскими элементами Flatlist

0 голосов
/ 26 июня 2019

Работа над собственным приложением, в котором я должен перечислить пользовательские элементы в FlatList. Этот пользовательский элемент содержит две кнопки. Нажав на каждый из них, вы получите некоторые данные, относящиеся к этому нажатому элементу, и отобразится еще один FlatList с пользовательскими элементами между выбранным элементом и его следующим элементом.

Здесь, в этой ссылке, я нарисовал вид экрана. Нажав на кнопку B2, вы получите список, который отобразится между Parent FlatList item См. Screens Here

Я пытался с SectionList, где я отображаю свои первые данные списка в Headers из SectionList с Custom Component с двумя кнопками. Нажав на любую, получим другой список элементов и назначим эти данные нажатием section данных заголовка. Эти данные будут отображаться как дочерние элементы для выбранного раздела Header. Но это не сработало, как ожидалось, поэтому искал альтернативный способ с FlatList.

1 Ответ

0 голосов
/ 26 июня 2019

Ваш основной компонент будет выглядеть так: 

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

}

Попробуйте создать свой код, как описано выше. Это должно решить вашу проблему.

...