Sous-menu animé sur react-native

Je crée une application réactive native à l'aide de la bibliothèque native-base, et j'utilise le composant liste native-base pour le menu latéral mais j'ai un problème, je ne peux pas comprendre comment faire un sous-menu dans mon menu latéral, je dois être capable d'ouvrir un sous-menu avec animation quand un élément de menu est cliqué.Sous-menu animé sur react-native

La liste est codé comme suit:

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

Mais je veux ajouter un sous-menu, par exemple si je clique sur Menu 1 un sous-menu avec SUB1 SUB2 fade in Voici un exemple dans un. vidéo du résultat que je veux: http://res.cloudinary.com/atf19/video/upload/v1500308199/AwesomeScreenshot-2017-07-17T16-14-52-723Z_wymybj.webm

J'ai essayé d'utiliser une autre liste dans ma liste réelle mais juste gâcher la conception, je cherchais réagir plug-in natif qui gèrent ce genre de problème, mais je n'a trouvé aucune.

PS: veuillez noter que les éléments de la liste sont créés dynamiquement à partir d'un serveur.

Source

2017-07-17 Atef

Qu'avez-vous essayé? Qu'est-ce qui n'a pas fonctionné? Êtes-vous coincé sur un point peu clair dans la documentation (pour NativeBase ou la bibliothèque Animated)? Est-ce que l'aspect dynamique de la liste vous fait trébucher? Veuillez toujours inclure les choses que vous avez essayées et recherchées, et voir [Comment demander] (https://stackoverflow.com/help/how-to-ask) pour vous aider à écrire une bonne question. –

@MichaelCheng Je viens d'ajouter un résumé de ce que j'ai essayé, mais je ne peux pas trouver une approche pour résoudre ce problème, c'est pourquoi j'ai posté cette question. – Atef

"J'ai essayé d'utiliser une autre liste dans ma liste actuelle, mais elle ne fait que gâcher le design" Postez votre code afin que les gens puissent vous diriger vers la bonne direction et peut-être signaler les zones où vous faites une erreur. Encore une fois, voir [Comment demander] (https://stackoverflow.com/help/how-to-ask). –

Solution de contournement possible: Vous pouvez créer des éléments ListItems au même niveau créés dynamiquement. Donc, si vous cliquez sur Menu1. Vous récupérer les données et lorsque vous êtes prêt:

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

Et bien sûr, ont un style différent pour chaque de ces articles « enfant ». Afin de simuler le résultat attendu.

Je l'ai fait avec des composants HTML pas RN pour le moment. Mais l'idée est la même.

Source

2017-07-17 21:59:31 hugomosh

Sous-menu animé sur react-native

Répondre

Questions connexes