import React from "react"; import { View, Text, StyleSheet, ScrollView, Image } from "react-native"; const Icons = [ { name: "Food", uri: require("./images/Food.png") }, { name: "Mart", uri: require("./images/mart.png") }, { name: "Car", uri: require("./images/car.png") } ]; const IconSelection = Icons.map((icons) => ( <View> <Image source={icons.uri} /> <Text style={{ textAlign: "center" }}>{icons.name}</Text> </View> )); const styles = StyleSheet.create({}); export default IconSelection;IconSelection.js ¿Cómo agrego imágenes dentro de mis íconos constantes? Básicamente, quiero crear una lista de íconos usando imágenes y poder llamarlos. Anteriormente, mi método era básicamente codificarlos a mano, pero descubrí que es muy complicado. Creo que maps() podría ayudarme, pero tampoco estoy muy seguro de cómo usarlo. Gracias.
IconSelection es una referencia a una matriz que contiene JSX devuelto.
Convertirlo en un componente funcional
import React from "react"; import { View, Text, StyleSheet, ScrollView, Image } from "react-native"; const Icons = [ { name: "Food", uri: require("./images/Food.png") }, { name: "Mart", uri: require("./images/mart.png") }, { name: "Car", uri: require("./images/car.png") }, ]; const IconSelection = () => Icons.map((icons) => ( <View> <Image source={icons.uri} /> <Text style={{ textAlign: "center" }}>{icons.name}</Text> </View> )); const styles = StyleSheet.create({}); export default IconSelection;