1

No tengo mucha experiencia con React Native, me gustaría que alguien pudiera ayudarme con este problema. Estoy tratando de mostrar imágenes aleatorias de una matriz si la condición es verdadera y sin repetir la misma imagen que ya se muestra. Intenté también con .splice pero no funcionó para mí.

const Example= () => {

  const [Nrandom, setNrandom] = useState([)
 
 const selected = () => {


    const find = ArrayExample[Math.floor(Math.random() * ArrayExample.length)].img
    if(Nrandom.filter((i => i !== find))){
          setNrandom(Nrandom => [...Nrandom, find])
      return find}

     }


return (
    <View style={styles.container}>
      <View>
        <View style={styles.background}>
          <View>
            {data.number.map((n) => {
              if (20 < n > 28)
                return <View style={styles.card}>
                  <View style={styles.card}>
                    <Image style={styles.clothes} source={selected()}></Image>
                  </View>

                </View>
            })}


          </View>
        </View>

      </View>

    </View >

  );
}

export default Example ```
0

3 respuestas 3

0

Puedes usar useState y useEffect para recordar tus imagenes y la imagen activa.

Primero configuras los states:

    const [nuevaImagen, setNuevaImagen] = useState(false);
    const [imagenActiva, setImagenActiva] = useState('');
    const [imagenes, setImagenes] = useState(IMAGENES);

Aquí tienes una función para obtener la imagen activa y actualizar la lista de imagenes

const establecerImagenActiva = () => {
      const src = imagenes[Math.floor(Math.random() * imagenes.length)];
      const nuevaLista = [...imagenes].filter(i => i !== src);
      setImagenes(nuevaLista);
      return src;
};
    
        

y un useEffect para actualizar la imagen activa.

useEffect(() => {
      if (nuevaImagen) {
           setImagenActiva(establecerImagenActiva);
      }
 }, [nuevaImagen])

También necesitas usar require(...) para tu source de imagen.

El código completo:

const IMAGENES = [
    require("../../assets/forest.jpg"),
    require("../../assets/beach.jpg"),
    require("../../assets/mountain.jpg"),
];

const ImagenScreen = () => {
    const [nuevaImagen, setNuevaImagen] = useState(false);
    const [imagenes, setImagenes] = useState(IMAGENES);

    const establecerImagenActiva = () => {
        const src = imagenes[Math.floor(Math.random() * imagenes.length)];
        const nuevaLista = [...imagenes].filter(i => i !== src);
        setImagenes(nuevaLista);
        return src;
    };
    const [imagenActiva, setImagenActiva] = useState('');

    useEffect(() => {
        if (nuevaImagen) {
            setImagenActiva(establecerImagenActiva());
            setNuevaImagen(false);
        }
    }, [nuevaImagen]);

    return (
        <View>
            <Text>Hola</Text>
            <Image source={imagenActiva}/>
            <Button title="nueva imagen" onPress={() => {
                setNuevaImagen(true);
            }}/>
        </View>
    );
};
3
  • Hola milmal, gracias! Justo es eso lo que quería, pero conservando la imagen anterior, no eliminándola y cambiándola por otra.
    – Jsan
    Commented el 14 nov. 2020 a las 13:38
  • Hola, como quieres conservar la imagen anterior? En un array? O solo la imagen anterior y sobrescribir cada vez?
    – milmal
    Commented el 14 nov. 2020 a las 15:24
  • al fin lo conseguí milmal, muchas gracias por tu interés y tu ayuda, mi objetivo era conseguir una lista de imágenes que no se repitieran de tantas imágenes como veces se cumpliera la condición, pongo más abajo la respuesta
    – Jsan
    Commented el 17 nov. 2020 a las 8:12
0

Mostrando una imagen y debajo de esa la siguiente y la siguiente pero no todo el array, sino solo tantas imágenes como veces se cumpla la condición, en esta parte

              if (20 < n > 28)
                return <View style={styles.card}>
                  <View style={styles.card}>
                    <Image style={styles.clothes} source={selected()}></Image>
                  </View>

                </View>
            })}

Cada vez que la condición sea true, se muestre una de las imágenes del array pero sin repetir

1
  • Hola Jsan. Por favor siga la estructura de Stackoverflow. Actualizas tu pregunta en vez de comentas como respuestas. No recibo notificaciones cuando lo haces así. Además no estoy segura de entenderte correctamente. Quieres que se muestre un número aleatorio de imágenes? O por ejemplo se muestre 5 y 5 aleatorio de imágenes? Por favor actualiza tu pregunta.
    – milmal
    Commented el 16 nov. 2020 a las 7:09
0
const Example= () => {

  const [Nrandom, setNrandom] = useState([])
 
 const selected = () => {

 const lo = []
  const selected = (items) => {

    const arr = [...Nrandom]

    const find = arr[Math.floor(Math.random() * arr.length)]
    const index = lo.indexOf(find);
    const indexToDelete = arr.indexOf(find)



    if (index < 0) {
      lo.push(find);
      arr.splice(indexToDelete, 1);
      return find
    }

  }


return (
    <View style={styles.container}>
      <View>
        <View style={styles.background}>
          <View>
            {data.number.map((n) => {
              if (20 < n > 28)
                return <View style={styles.card}>
                  <View style={styles.card}>
                    <Image style={styles.clothes} source={selected()}></Image>
                  </View>

                </View>
            })}


          </View>
        </View>

      </View>

    </View >

  );
}

export default Example ```

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.