comment reac-native rend les composants TouchableOpacity sur la même ligne - horizontalement

J'ai un composant de produit - TouchableOpacity comme montré dans l'image. Nombre de produits est dynamique.Thing est que, je veux poster 2 produits sur chaque ligne. Mais je ne peux pas. Il les rend verticalement, bien que je mette horizontalement comme vrai. Comment puis-je résoudre, il? Avez-vous une suggestion?comment reac-native rend les composants TouchableOpacity sur la même ligne - horizontalement

Voici mon style de la composante

Et comment ils sont rendus

Source

2017-02-18 Ali Zeynalov

La valeur par défaut pour flexDirection en réaction natif est column. Vous devez le définir à row dans le style du conteneur de votre liste de TouchableOpacity.

Voici un exemple de la documentation officielle: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

Si vous voulez que vos éléments, qui dépassent la taille du conteneur à emballer à la ligne suivante, vous pouvez définir flexWrap:"wrap". Voici le doc: https://facebook.github.io/react-native/docs/layout-props.html#flexwrap

Source

2017-02-18 21:08:07

Merci. Lorsque je règle flexDirection sur 'row' dans le style de TouchableOpacity, il ne restitue que 2 produits sur la première ligne. Les produits après le second ne sont pas montrés @ Kevin Amiranoff –

Je suppose que cela vient du composant n'étant pas enveloppé à la 'row' suivante. Est-ce que cela fonctionne si vous mettez 'flexWrap:" noWrap "' dans le conteneur de 'TouchableOpacity'. Par exemple le 'View' au-dessus de votre liste de' TouchableOpacity'. Et le doc: https://facebook.github.io/react-native/docs/layout-props.html#flexwrap –

Merci beaucoup. Tu as sauvé ma journée :) J'ai essayé nowrap mais ça n'a pas marché. Cependant, quand j'ai réglé 'wrap' au lieu de 'unwrap' juste pour essayer, ça a marché. –

comment reac-native rend les composants TouchableOpacity sur la même ligne - horizontalement

Répondre

Questions connexes