Question

我正在尝试使用Math.floor选择随机图像。我想在分配的20张图像之间选择图像。

我有20张图片：

const randomImages = [
    require('../Components/Assets/blind1.png'),
    require('../Components/Assets/blind2.png'),
    require('../Components/Assets/blind3.png'),
    ... up to 20
];

然后，我尝试选择像这样的随机图像：

 selectedRandomImage(){
    const randomImage = randomImages[Math.floor((Math.random() * 19) + 1)]
    console.log(randomImage,'randomImage')
    return(
      <View>
        <Image
          style={{ width: 56, height: 56 }}
          source={randomImage} />
      </View>
    )
  }

我的问题：我使用上面的代码获得了随机图片，但是当我console.log(randomImage,'randomImage')

时

我得到的数字超过20。这是为什么？是不是应该在20岁以下？

当数字超过20时，我仍然得到随机图像。

Answer 1

Math.random()生成0到1之间的数字，然后
Math.random() * 19生成介于0到19之间的数字，并且
(Math.random() * 19) + 1产生1到20之间的数字，但是您的数组有19个索引，randomImages [20]返回未定义

Answer 2

randomImage变量具有来自randomImages数组的一些随机图像路径。

require("path to image")返回映射到图像的数字。响应本机将唯一的数字映射到静态图像，这就是为什么当您尝试登录时，它给出的数字超过20。

但是，如果您尝试记录Math.floor((Math.random() * 19) + 1)值，它将低于20。

Answer 3

   const imageCollection =
    [
      require('App/assets/images/doe1.jpg'),
      require('App/assets/images/doe2.jpg'),
      require('App/assets/images/doe3.jpg'),
      require('App/assets/images/doe4.jpg'),
      require('App/assets/images/John-Doe.jpg'),
      require('App/assets/images/John-Doe.jpg'),
    ];

    const getRandomImage = () => 
      imageCollection[Math.floor(Math.random() * imageCollection.length)];

将是一种更好的方法，因为该函数知道图像数组的长度，并将相应地更新。

react-native：使用Math.floor拾取随机图像

3 个答案: