将本机使用变量用于图像文件

Question

我知道要在本机中使用静态图像,你需要专门对该图像做一个要求,但我试图根据一个数字加载一个随机图像.例如,我在我的目录中有100个名为img1.png的图像 - img100.png.我想找到一种方法来做到以下几点

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

我知道这有意无效,但任何变通办法都会受到高度赞赏.

Answer 1

对于任何了解反应原生兽的人来说,这应该有帮助:)

我过去也访问了几个网站,但发现它越来越令人沮丧.直到我在这里阅读这个网站.

这是一种不同的方法,但它最终会得到回报.基本上,最好的方法是将所有资源加载到一个地方.考虑以下结构

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

在index.js,您可以这样做:

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

export default images;

在您的视图中,您必须导入图像组件,如下所示:

import Images from './img/index';

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

每个人都有不同的手段来结束,只需选择最适合你的方式.

达曼 - 问:这个答案如何使用变量？

好吧,因为require只接受一个文字字符串,你不能使用变量,连接字符串等.这是下一个最好的事情.是的,它仍然是很多工作,但现在你可以做一些类似于OP问题的事情:

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

Answer 2

在JS中,require语句在bundle时解析(当计算JS包时).因此,不支持将变量表达式作为参数require.

在需要资源的情况下,它更加棘手.如果有require('./someimage.png'),React Native packager将定位所需的图像,然后它将与应用程序捆绑在一起,以便在您的应用程序运行时它可以用作"静态"资源(实际上在开发模式下它不会捆绑使用您的应用图像,但图像将从服务器提供,但这在您的情况下无关紧要).

如果要将随机图像用作静态资源,则需要告知应用程序将该图像捆绑.您可以通过以下几种方式实现:

1)其添加为您的应用程序的静态资产,然后引用到它<Image src={{uri:'name_of_the_image_in_assets.png'}}/>(这里是你如何把它添加到原生iOS应用)

2)静态地要求所有图像.某事物的形式:

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

然后在您的代码中,您可以:

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

3)使用网络图像 <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

Answer 3

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

在本次讨论的上下文中，我遇到过想要为特定背景动态分配图像的情况。在这里，我像这样改变状态

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