0
444
ViewsCómo usar Grid para imagen y texto React Native
import React, { useState } from "react"; import { View, Text, StyleSheet, FlatList, Image } from "react-native"; const Icons = [ { name: "Shopee Supermarket", uri: require("../Images/supermarket.png") }, { name: "RM15 Free Shipping", uri: require("../Images/freeshipping.jpg") }, { name: "15% Cashback", uri: require("../Images/cashback.jpg") }, { name: "Live", uri: require("../Images/live.png") }, { name: "Shopee Food", uri: require("../Images/shopeefood.png") }, { name: "Shopee Pay", uri: require("../Images/shopeepay.png") }, { name: "Shop Malaysia", uri: require("../Images/malaysia.png") }, { name: "COD", uri: require("../Images/cod.jpg") }, ]; const IconsSelection = () => Icons.map((icons) => ( <View style={styles.container}> <Image source={icons.uri} style={styles.image} resizeMode={"contain"} /> <Text style={styles.textFont}>{icons.name}</Text> </View> )); const styles = StyleSheet.create({ container: { flex: 1, }, image: { width: 40, height: 40, }, textFont: { fontSize: 12, }, }); export default IconsSelection;hola me gustaria saber como hago para que mi imagen y texto quede dentro de 2 horizontales. En este momento, mi imagen y texto se muestran en la columna. hola me gustaria saber como hago para que mi imagen y texto quede dentro de 2 horizontales. En este momento, mi imagen y texto se muestran en la columna. Gracias
1 answers
Answer question0
Puede manejar esto completamente con Flexbox de la siguiente manera.
- Para cada Icono en
Icons, cree unaViewconflexDirection: row. - Anide la selección de
IconsSelectionen unaViewconflexDirection: column. Dado que este es el valor predeterminado paraView, no es necesario que lo hagamos explícito en nuestros estilos.
Aquí hay una versión de trabajo.
const IconsSelection = () => Icons.map((icons) => ( <View style={styles.inner}> <View style={styles.column}> <Image source={icons.uri} style={styles.image} resizeMode={"contain"} /> </View> <View style={styles.column}> <Text style={styles.textFont}>{icons.name}</Text> </View> </View> )); export default function App() { return ( <View> <IconsSelection /> </View> ); } const styles = StyleSheet.create({ column: { margin: 20, }, inner : { flexDirection: "row", marginRight: 20 }, image: { width: 40, height: 40, }, textFont: { fontSize: 12, }, });He usado las imágenes de la exposición como ejemplo. El código anterior produce el siguiente resultado.
Editar: En respuesta a los comentarios. Si desea tener dos imágenes una al lado de la otra seguidas de una fila de los textos correspondientes, entonces la solución más sencilla utiliza una FlatList con dos columnas de la siguiente manera.
export default function App() { const [data, setData] = useState(Icons) return ( <FlatList data={data} numColumns={2} keyExtractor={(item) => item.name} renderItem={({item}) => { return <View style={styles.inner}> <Image source={item.uri} style={styles.image} resizeMode={"contain"} /> <Text style={styles.textFont}>{item.name}</Text> </View> }}> </FlatList> ); }Lo anterior produce la siguiente salida.
