React Native Render Случайные массивы изображений - PullRequest
Новая
       21

React Native Render Случайные массивы изображений

0 голосов
/ 26 апреля 2020

Мой код на данный момент: 

import React from 'react'
import {useEffect, useState} from 'react'
import {Container1, Container2, Font1, Font2, Font3, Button1, ImageCard, TextInput1} from '../styles/image_quiz_styles'

const Play = ({}) => {

  const [reply, setReply] = useState('')

  function renderImage(){
    const myImages = [
      {image:require('../img/apple.jpg')},
      {image:require('../img/blackberry.jpg')},
      {image:require('../img/cherry.jpg')},
  ]
  const randomImage = [Math.floor(Math.random(myImages.length)*10)]

  switch(randomImage){
    case(0):
    return {Image:require('../img/apple.jpg')}
    break
    case(1):
    return {Image:require('../img/blackberry.jpg')}
    break
    case(2):
    return {Image:require('../img/cherry.jpg')}
    break
    default:
  }
  }

    return (
        <Container1>
        <Container2>
        <Font2>Time:{time}</Font2>
        </Container2>
        <Font3>{reply}</Font3>
        <ImageCard
        source={require(renderImage)}
        width='50'
        height='50'
        />
      </Container1>
    )
}

export default Play

Я хочу знать, как реализовать в моем коде способ рендеринга случайным образом трех изображений с использованием массива изображений. Я получаю ошибку "Недопустимый вызов require (renderImage)". Я хочу помочь.

Спасибо.

1 Ответ

1 голос
/ 26 апреля 2020

Основываясь на идее Stuck в комментарии, вот пример кода, который вы можете использовать: 

import React, { Component, useState, useEffect } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  const [reply, setReply] = useState();
  const [randomImage, setRandomImage] = useState('');

  const renderImage = () => {
    const myImages = [
      { image: 'https://picsum.photos/200/300' },
      { image: 'https://picsum.photos/200/300' },
      { image: 'https://picsum.photos/200/300' },
    ];
    const randomImageIndex = Math.floor(Math.random() * Math.floor(3));
    return myImages[randomImageIndex].image;
  };

  useEffect(() => {
    setRandomImage(renderImage);
  })

  return (
    <div>
      <div>
      </div>
      <div>{reply}</div>
      <img src={renderImage()} width="50" height="50" />
    </div>
  );
};

render(<App />, document.getElementById("root"));
...