hii je veux afficher des images horizontalement ayant 2 colonnes pour cela, j'utilise ScrollView mais je ne sais pas comment faire cela, j'utilise le code suivant }
5 Réponses :
au lieu de au lieu de Ceci, Utilisez ceci, pour plus de détails sur ScrollView Essayez FOLELIST qui fournit des accessoires NumColumns qui vous permet d'utiliser des colonnes selon votre choix. flatlist voir Documents officiels ici
hii je veux faire défiler les images horizontalement ayant deux colonnes rangées supérieures contiennent même des images et une rangée inférieure contiennent des images impaires
Essayez la propriété Flex-Direction:
renderItem(item) {
return (
<View style={{ margin: 5, flex: 1, flexDirection: "row", justifyContent: "space-around" }} >
<View style={{ backgroundColor: "red", width: 150, height: 150, marginBottom: 1 }} >
<Image style={{ width: 150, height: 150 }} source={{ uri: item.image }} />
</View>
<View style={{ backgroundColor: "red", width: 150, height: 150, marginBottom: 1 }} >
<Image style={{ width: 150, height: 150 }} source={{ uri: item.image }} />
</View>
</View>
);}
hii je veux faire défiler les images horizontalement ayant deux colonnes rangées supérieures contiennent même des images et une rangée inférieure contiennent des images impaires
Utilisez la liste plate à l'intérieur de la vue de défilement comme ceci
array1 = [obj1,obj2,obj3,obj4,obj5,obj6,obj7, array2=[[obj1,obj2],[obj3,obj4],[obj5,obj6],[obj7,obj8]]
hii je veux faire défiler les images horizontalement ayant deux colonnes rangées supérieures contiennent même des images et une rangée inférieure contiennent des images impaires
NumColumns = {2}, horizontal = {true} ne peut pas utiliser simultanément, je reçois une erreur
Désolé n'a pas trouvé de solution directe, mais vous pouvez copier votre tableau sur un nouveau avec chaque élément ayant 2 objets, je vais mettre à jour la réponse bientôt
Modifier votre composant ScrollView Component comme suit:
<ScrollView horizontal={true} contentContainerStyle={{height:300, flexWrap:'wrap'}}>
{this.state.dataSource.map(item => this.renderItem(item))}
</ScrollView>
Pour créer une vue pendant que vous avez besoin de mettre en œuvre votre logique personnalisée. Dans in in Render Appelez une fonction intermédiaire pour obtenir des colonnes en deux rangées: renduhorizantol fonction de la fonction de configuration de la logique pour même ou Les lignes impaires, je suis en train de mettre en place ceci sur l'index de DataSource : renderItem Fonction Passez deux éléments pour dessiner le contenu de la rangée supérieure et inférieure:
@ Hector4888 Acceptez la réponse si fonctionne pour vous, cela aide les autres aussi à choisir une réponse correcte.
Avant de raincre la vue, vous devez diviser votre tableau d'origine en une matrice pair et impair, en ajoutant un chèque pair. Ensuite, rendez-vous à l'aide de la plate-forme ou à l'aide de la fonction de carte ou de votre composant approprié que vous souhaitez.
Je sais mais je ne sais pas comment faire ça ..