Javascript 为图像文件反应本机使用变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33907218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react native use variable for image file
提问by bgrober
I know that to use a static image in react native you need to do a require to that image specifically, but I am trying to load a random image based on a number. For example I have 100 images called img1.png - img100.png in my directory. I am trying to figure out a way to do the following
我知道要在 React Native 中使用静态图像，您需要专门对该图像进行要求，但我正在尝试根据数字加载随机图像。例如，我的目录中有 100 张名为 img1.png - img100.png 的图像。我试图找出一种方法来执行以下操作
<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/>
I know this intentionally does not work, but any workarounds would be greatly appreciated.
我知道这故意不起作用，但任何解决方法将不胜感激。
回答by DerpyNerd
For anyone getting to know the react-native beast, this should help :)
对于任何了解 react-native 野兽的人来说，这应该会有所帮助:)
I visited a couple of sites in the past too, but found it increasingly frustrating. Until I read this site here.
我过去也访问过几个网站，但发现它越来越令人沮丧。直到我在这里阅读了这个网站。
It's a different approach but it eventually does pay off in the end. Basically, the best approach would be to load all your resources in one place. Consider the following structure
这是一种不同的方法，但最终确实得到了回报。基本上，最好的方法是将所有资源加载到一个地方。考虑以下结构
app
|--img
|--image1.jpg
|--image2.jpg
|--profile
|--profile.png
|--comments.png
|--index.js
In index.js, you can do this:
在 中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;
In your views, you have to import the images component like this:
在您的视图中，您必须像这样导入图像组件：
import Images from './img/index';
render() {
<Image source={Images.profile.comments} />
}
Everybody has different means to an end, just pick the one that suits you best.
每个人都有不同的方法达到目的，选择最适合你的方法。
Da Man - Q: How is this answer using a variable?
Da Man - 问：这个答案如何使用变量？
Well, since requireonly accepts a literal string, you can't use variables, concatenated strings, etc. This is the next best thing. Yes, it still is a lot of work, but now you can do something resembling the OP's question:
好吧，由于require只接受文字字符串，所以不能使用变量、连接字符串等。这是下一个最好的事情。是的，它仍然有很多工作，但现在你可以做一些类似于 OP 问题的事情：
render() {
var images = { test100: "image100" };
return (
<View>
<Text>
test {images["test" + "100"]}
</Text>
</View>
);
}
回答by kzzzf
In JS require statements are resolved at bundle time (when the JS bundle is calculated). Therefore it's not supported to put variable expression as an argument for require.
在 JS 中 require 语句在捆绑时（计算 JS 捆绑时）解析。因此，不支持将变量表达式作为require.
In case of requiring resources it's even more trickier. When you have require('./someimage.png'), React Native packager will locale required image and it will be then bundled together with the app so that it can be used as a "static" resource when your app is running (in fact in dev mode it won't bundle the image with your app but instead the image will be served from the server, but this doesn't matter in your case).
如果需要资源，那就更棘手了。当你有 时require('./someimage.png')，React Native 打包器将本地化所需的图像，然后它将与应用程序捆绑在一起，以便在你的应用程序运行时它可以用作“静态”资源（实际上在开发模式下它不会捆绑图像与您的应用程序，但图像将从服务器提供，但这在您的情况下无关紧要）。
If you want to use random image as a static resource you'd need to tell your app to bundle that image. You can do it in a few ways:
如果您想使用随机图像作为静态资源，您需要告诉您的应用程序捆绑该图像。您可以通过以下几种方式做到这一点：
1) Add it as a static asset of your app, then reference to it with <Image src={{uri:'name_of_the_image_in_assets.png'}}/>(hereis how you can add it to the native iOS app)
1) 将其添加为应用程序的静态资产，然后使用<Image src={{uri:'name_of_the_image_in_assets.png'}}/>（这里是如何将其添加到本机 iOS 应用程序）进行引用
2) Require all the images upfront statically. Sth in a form of:
2) 预先静态要求所有图像。某种形式的：
var randomImages = [
require('./image1.png'),
require('./image2.png'),
require('./image3.png'),
...
];
Then in your code you can do:
然后在您的代码中，您可以执行以下操作：
<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>
3) Use network image with <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>
3）使用网络图像 <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>
回答by Arausi Daniel
class ImageContainer extends Component {
this.state ={
image:require('default-img')
}
<View>
<Image source={this.state.image} />
</View>
}
In the context of this discussion,I had this case where wanted to dynamically assign images for a particular background. Here I change state like this
在本次讨论的上下文中，我遇到过想要为特定背景动态分配图像的情况。在这里，我像这样改变状态
this.setState({
image:require('new-image')
})
回答by Ryan S
I came to this thread looking for a way to add images in a dynamic way. I quickly found that passing in a variable to the Image -> require() was not working.
我来到这个线程寻找一种以动态方式添加图像的方法。我很快发现将变量传递给 Image -> require() 不起作用。
Thanks to DerpyNerd for getting me on the correct path.
感谢 DerpyNerd 让我走上了正确的道路。
After implementing the resources in one place I then found it easy to add the Images. But, I still needed a way to dynamically assign these images based on changing state in my application.
在一个地方实现资源后，我发现添加图像很容易。但是，我仍然需要一种方法来根据应用程序中不断变化的状态动态分配这些图像。
I created a function that would accept a string from a state value and would then return the Image that matched that string logically.
我创建了一个函数，它接受来自状态值的字符串，然后返回逻辑上匹配该字符串的图像。
Setup
设置
Image structure:
图像结构：
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
In index.js, I have this:
在index.js，我有这个：
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;
In my SearchableList.jscomponent, I then imported the Images component like this:
在我的SearchableList.js组件中，我然后像这样导入了 Images 组件：
import Images from './assets/images';
I then created a new function imageSelectin my component:
然后imageSelect我在我的组件中创建了一个新函数：
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];
};
Then in my components renderfunction I call this new imageSelectfunction to dynamically assign the desired Image based on the value in the this.state.network:
然后在我的组件render函数中，我调用这个新imageSelect函数来根据 中的值动态分配所需的图像this.state.network：
render() {
<Image source={this.imageSelect(this.state.network)} />
}
Once again, thanks to DerpyNerd for getting me on the correct path. I hope this answer helps others. :)
再次感谢 DerpyNerd 让我走上了正确的道路。我希望这个答案可以帮助其他人。:)
