He leído varias publicaciones sobre problemas que tienen las personas con React Native y la función require() cuando intentan solicitar un recurso dinámico como:
Dinámico (falla) :
urlName = "sampleData.json"; data = require('../' + urlName);vs Estático (éxito) :
data = require('../sampleData.json');He leído en algunos hilos que esto es un error en React Native y en otros que esto es una característica.
¿Hay una nueva forma de requerir un recurso dinámico dentro de una función?
Publicaciones relacionadas (todas bastante antiguas en tiempo de reacción):
Como he oído, el require() de react solo usa url estática, no variables, eso significa que tienes que hacer require('/path/file') , echa un vistazo a este problema en github y este para más soluciones alternativas, hay un par de otras maneras de hacerlo! por ejemplo
const images = { profile: { profile: require('./profile/profile.png'), comments: require('./profile/comments.png'), }, image1: require('./image1.jpg'), image2: require('./image2.jpg'), }; export default images;entonces
import Images from './img/index'; render() { <Image source={Images.profile.comments} /> }de esta respuesta
Aquí está mi solución.
Configuración
Estructura del archivo:
app |--src |--assets |--images |--logos |--small_kl_logo.png |--small_a1_logo.png |--small_kc_logo.png |--small_nv_logo.png |--small_other_logo.png |--index.js |--SearchableList.js En index.js , tengo esto:
const images = { logos: { kl: require('./logos/small_kl_logo.png'), a1: require('./logos/small_a1_logo.png'), kc: require('./logos/small_kc_logo.png'), nv: require('./logos/small_nv_logo.png'), other: require('./logos/small_other_logo.png'), } }; export default images; En mi componente SearchableList.js , luego importé el componente Imágenes de esta manera:
import Images from './assets/images'; Luego creé una nueva función imageSelect en mi componente:
imageSelect = network => { if (network === null) { return Images.logos.other; } const networkArray = { 'KL': Images.logos.kl, 'A1': Images.logos.a1, 'KC': Images.logos.kc, 'NV': Images.logos.nv, 'Other': Images.logos.other, }; return networkArray[network]; }; Luego, en la función de render de mis componentes, llamo a esta nueva función imageSelect para asignar dinámicamente la imagen deseada en función del valor en this.state.network :
render() { <Image source={this.imageSelect(this.state.network)} /> }El valor pasado a la función imageSelect podría ser cualquier cadena dinámica. Simplemente elegí configurarlo en el estado primero y luego pasarlo.
Espero que esta respuesta ayude. :)
Descubrí que una ruta dinámica para require() funciona cuando comienza con una cadena estática. Por ejemplo require("./" + path) funciona, mientras que require(path) no.