txt - listar archivos de una carpeta javascript

reaccionar variable de uso nativo para archivo de imagen

Question

Sé que para usar una imagen estática en react native necesitas hacer un requerimiento específico para esa imagen, pero estoy tratando de cargar una imagen aleatoria basada en un número. Por ejemplo, tengo 100 imágenes llamadas img1.png - img100.png en mi directorio. Estoy tratando de encontrar una manera de hacer lo siguiente

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/>

Sé que esto no funciona intencionalmente, pero cualquier solución alternativa sería muy apreciada.

Answer 1

En JS, las declaraciones requeridas se resuelven en el momento del paquete (cuando se calcula el paquete JS). Por lo tanto, no se admite poner expresión variable como argumento para require .

En caso de requerir recursos, es aún más complicado. Cuando haya require(''./someimage.png'') , React Native packager localizará la imagen requerida y luego se incluirá junto con la aplicación para que pueda usarse como un recurso "estático" cuando su aplicación se esté ejecutando (en de hecho, en el modo de desarrollo, no incluirá la imagen con su aplicación, sino que la imagen se servirá desde el servidor, pero esto no importa en su caso).

Si desea utilizar una imagen aleatoria como recurso estático, deberá indicarle a su aplicación que agrupe esa imagen. Puedes hacerlo de varias maneras:

1) Agréguelo como un activo estático de su aplicación, luego haga referencia a él con <Image src={{uri:''name_of_the_image_in_assets.png''}}/> (así es como puede agregarlo a la aplicación nativa de iOS)

2) Requerir todas las imágenes por adelantado estáticamente. Algo en forma de:

var randomImages = [
    require(''./image1.png''),
    require(''./image2.png''),
    require(''./image3.png''),
    ...
];

Luego, en su código, puede hacer:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3) Use la imagen de red con <Image src={{uri:''http://i.imgur.com/random.jpg''}}/>

Answer 2

Llegué a este hilo buscando una manera de agregar imágenes de forma dinámica. Rápidamente descubrí que pasar una variable a la Imagen -> require () no estaba funcionando.

Gracias a DerpyNerd por llevarme por el camino correcto.

Después de implementar los recursos en un lugar, me resultó fácil agregar las imágenes. Pero, todavía necesitaba una forma de asignar dinámicamente estas imágenes en función del estado cambiante de mi aplicación.

Creé una función que aceptaría una cadena de un valor de estado y luego devolvería la imagen que coincidía lógicamente con esa cadena.

Preparar

Estructura de la imagen:

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 , 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 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)} />
}

Una vez más, gracias a DerpyNerd por llevarme por el camino correcto. Espero que esta respuesta ayude a otros. :)

Answer 3

Para cualquiera que conozca la bestia nativa de reacción, esto debería ayudar :)

También visité un par de sitios en el pasado, pero lo encontré cada vez más frustrante. Hasta que leí este sitio aquí .

Es un enfoque diferente, pero finalmente vale la pena al final. Básicamente, el mejor enfoque sería cargar todos sus recursos en un solo lugar. Considere la siguiente estructura

app  
   |--img
      |--image1.jpg
      |--image2.jpg
      |--profile
          |--profile.png
          |--comments.png
      |--index.js

En index.js , puede hacer esto:

const images = {
    profile: {
        profile: require(''./profile/profile.png''),
        comments: require(''./profile/comments.png''),
    },
    image1: require(''./image1.jpg''),
    image2: require(''./image2.jpg''),
};

export default images;

En sus vistas, debe importar el componente de imágenes de esta manera:

import Images from ''./img/index'';

render() {
    <Image source={Images.profile.comments} />
}

Todos tienen diferentes medios para un fin, solo elija el que más le convenga.

Da Man - P: ¿Cómo se usa esta respuesta con una variable?

Bueno, dado que require solo acepta una cadena literal, no puede usar variables, cadenas concatenadas, etc. Esta es la mejor opción. Sí, todavía es mucho trabajo, pero ahora puedes hacer algo parecido a la pregunta del OP:

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}

Answer 4

class ImageContainer extends Component {
   this.state ={
     image:require(''default-img'')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

En el contexto de esta discusión, tuve este caso donde quería asignar dinámicamente imágenes para un fondo particular. Aquí cambio de estado así

this.setState({
  image:require(''new-image'')
})