Анимированное подменю на Реактива

Question

Я создаю реактивное приложение с использованием библиотеки native-base, и я использую компонент списка native-base для бокового меню, но у меня есть проблема, я не могу понять, как создать подменю в моем боковом меню Мне нужно иметь возможность открывать подменю с анимацией при нажатии на пункт меню.

Список закодирован следующим образом:

<List>
   <ListItem>
     <Text>Menu 1</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 3</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 2</Text>
   </ListItem>
 </List>

Но я хочу добавить к нему подменю, например, если я нажму на Меню 1, появится подменю с sub1 sub2. Вот пример видео с желаемым результатом: http://res.cloudinary.com/atf19/video/upload/v1500308199/AwesomeScreenshot-2017-07-17T16-14-52-723Z_wymybj.webm

Я попытался использовать другой список внутри моего фактического списка, но он просто испортил дизайн, я искал реагирующий плагин, который решает такую ​​проблему, но я не нашел ни одного.

PS: пожалуйста, примите во внимание, что элементы списка создаются динамически с сервера.

Answer 1

Возможный обходной путь: вы можете иметь ListItems на том же уровне, создаваемом динамически.

Так что, если вы нажмете Menu1. Вы получаете данные и когда готовы:

<List>
   <ListItem>
     <Text>Menu 1</Text>
   </ListItem>
   <ListItem>
     <Text>ITEM 1</Text>
   </ListItem>
    <ListItem>
     <Text>ITEM 2</Text>
   </ListItem>
   ...
   <ListItem>
     <Text>Menu 3</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 2</Text>
   </ListItem>
 </List>

И, конечно, есть разные стили для каждого из этих "дочерних" предметов. Для того, чтобы смоделировать ожидаемый результат.

Я сделал это с компонентами HTML еще не RN. Но идея та же самая.