react-native 上的动画子菜单答案

【问题标题】：Animated submenu on react-nativereact-native 上的动画子菜单
【发布时间】：2017-12-22 06:48:33
【问题描述】：

我正在使用 native-base 库创建一个 react-native 应用程序，并且我正在使用 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

我尝试在我的实际列表中使用另一个列表，但它只是弄乱了设计，我寻找可以管理此类问题的 react native 插件，但我没有找到。

PS：请注意，列表项是从服务器动态创建的。

【问题讨论】：

你试过什么？什么没用？您是否停留在文档中的某个不清楚的地方（对于 NativeBase 或 Animated 库）？列表的动态方面是否会以某种方式绊倒你？请始终包含您尝试和研究过的内容，并查看 How to Ask 以获取有关编写好问题的帮助。
@MichaelCheng 我刚刚添加了我尝试过的简要说明，但我实际上找不到解决这个问题的方法，这就是我发布这个问题的原因。
“我尝试在我的实际列表中使用另一个列表，但它只会弄乱设计”发布您的代码，以便人们可以为您指出正确的方向，并指出您犯错误的地方。再次，请参阅How to Ask。

标签： javascript list react-native native-base react-native-drawer

【解决方案1】：

可能的解决方法：您可以动态创建同一级别的 ListItem。

因此，如果您单击 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 完成了它。但想法是一样的。

【讨论】：