Estoy obteniendo datos de api y luego quiero mostrar imágenes basadas en el símbolo que proviene de los datos de api
{apiData ? ( apiData.data.map((item, key) => ( <Listing symbol={item.symbol} path={`../images/${item.symbol}.png`} /> )) ) : ( <></> )}enviando la ruta y el símbolo a otro componente VVVV
const Listing = ({ symbol, path }) => { return ( <View style={tw`flex-row justify-between p-10`}> <View style={tw`flex-row items-center`}> <Text style={tw`mr-2`}>{symbol}</Text> <Image source={require(path)} style={{ width: 50, height: 50 }} /> <Text>{path}</Text> </View> </View> ); };¿Hay alguna manera de hacerlo así o tengo que usar otra cosa?
"Para que esto funcione, el nombre de la imagen require debe conocerse estáticamente", eso es lo que dice el documento de React Native. En otras palabras, no puede requerir una imagen en React Native con una ruta dinámica.
La solución en su caso es importarlos estáticamente en un objeto, donde cada clave es un symbol y su valor es la path de su imagen relacionada. No olvides usar la ruta correcta:
const images = { one: require("../images/imageOne.png"), two: require("../images/imageTwo.png"), }; De esta manera, le das a Listing solo el symbol y obtendrá la imagen del objeto anterior:
const Listing = ({ symbol }) => { return ( <View style={tw`flex-row justify-between p-10`}> <View style={tw`flex-row items-center`}> <Text style={tw`mr-2`}>{symbol}</Text> <Image source={images[symbol]} style={{ width: 50, height: 50 }} /> <Text>{path}</Text> </View> </View> ); };