javascript require() 必须有一个字符串文字参数 React Native
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47887697/
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
require() must have a single string literal argument React Native
提问by Zubair
I've component in my application which works fine if it is assigned direct string value("someImage.png"), but if I try to assign it by storing image name in a local variable it gives this exception "require() must have a single string literal argument" This line works fine
我的应用程序中有一个组件，如果它被分配直接字符串值（“someImage.png”），它就可以正常工作，但是如果我尝试通过将图像名称存储在局部变量中来分配它，则会出现此异常“require() must have单个字符串文字参数”这一行工作正常
<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}>
Issue occurs in this case
在这种情况下出现问题
let imageName = "./Resources/bg/imageone.png";
<ImageBackground id="123" source={require(imageName)} resizeMode='cover' style={customStyles.backdrop}>
I also found same issue reported here, but no one has answered that yet. Can you help me out here?
回答by soutot
This example of dynamic images can also show how to correctly assign a variable with the image source value. The recommendation is to assign the whole requirein a variable, instead of just its value.
这个动态图像示例还可以展示如何使用图像源值正确分配变量。建议是require在变量中分配整体，而不仅仅是其值。
// GOOD
<Image source={require('./my-icon.png')} />;
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;
// GOOD
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;
https://facebook.github.io/react-native/docs/images.html
https://facebook.github.io/react-native/docs/images.html
Hope it helps
希望能帮助到你
回答by Onuray Sahin
If you have indexes in the data then my approach to the issue is:
如果数据中有索引，那么我解决这个问题的方法是：
const image1 = require('../assets/images/image1.png');
const image2 = require('../assets/images/image2.png');
const image3 = require('../assets/images/image3.png');
const images = [image1, image2, image3];
...
<Image source={images[index]} />
回答by Chris Poe
Here's a helper component that I use quite often:
这是我经常使用的辅助组件：
import your-image-name from '<path-to-image>';
const images = {
your-image-name,
};
getImage = name => images[name];
export default getImage;
Then, inside the component you need the image:
然后，在组件内部，您需要图像：
import getImage from '<path>';
<Image source={getImage('your-image-name')} />
Importing the image within the helper function removes the need to use require().
在辅助函数中导入图像无需使用require().
From there, you can import all your images into the getImagecomponent.
从那里，您可以将所有图像导入到getImage组件中。
If you would like to take it a step further, you can create a new Imagecomponent that takes in nameas a prop. For example:
如果您想更进一步，您可以创建一个新Image组件name作为道具。例如：
import { Image as RNImage } from 'react-native';
import getImage from '<path>';
const Image = ({ name, source, ...props }) => (
<RNImage
source={name ? getImage(name) : source}
{...props}
/>
);
export default Image;
Importing Imageusing as RNImageis used to avoid a duplicate declaration error.
导入Imageusingas RNImage用于避免重复声明错误。
Then
然后
import Image from '<path>';
<Image name="your-image-name" />
This also leaves you the ability to use sourceas a prop within the new Imagecomponent in case you ever need to use a URI instead of a relative path. Along with any other props you need to pass.
这也使您能够source在新Image组件中用作道具，以防您需要使用 URI 而不是相对路径。与您需要通过的任何其他道具一起。
From there, you will have access to the getImagecomponent without having to import it across multiple components within your app.
从那里，您将可以访问该getImage组件，而无需跨应用程序内的多个组件导入它。
Hope this helps!
希望这可以帮助！
回答by Faisol Palavan
//-Convert image path to Array list
//-将图像路径转换为数组列表
indexImag = [
require("./img/KPN48-01.jpg"),
require("./img/KPN48-02.jpg"),
require("./img/KPN48-03.jpg")
];
//-data Feed--
//-数据馈送 -
dataFeed = [
{
id: 1,
title: "Koisuru Fietune Cookie ???????????????",
subTitle: "128,136,082 views",
imgId: 0
},
{
id: 2,
title: "BNK48 - ??????????????? Koisuru Fortune Cookie Cover",
subTitle: "328,006,000 views",
imgId: 1
},
{
id: 3,
title: "???????? - ??????????????? - BNK48 - Koisuru Fortune Cookie",
subTitle: "334,111,234 views",
imgId: 2
},
{
id: 4,
title:
"????????????????? MV BNK48 Koisuru Foutune Cookie ???????????????",
subTitle: "100,000,055 views",
imgId: 0
},
{
id: 5,
title:
"?????? ?????????????! ?????????? ??????????????? ??? 3 ???????????????????? ",
subTitle: "400,143,634 views",
imgId: 1
}
];
//-render--
//-使成为 -
<View>
<View>
<Image
source={require("./img/LogoPP.png")}
/>
<View>
<Text>{_item.textTitle} </Text>
<Text>{_item.subTitle} </Text>
</View>
</View>
<Image
source={this.indexImag[_item.imgId]}
/>
</View>
回答by Picci
The solution there if you have more than 2 choices is to pass the result of the require as a parameter instead of do a require(param) inside the method.
如果您有 2 个以上的选择，那么解决方案是将 require 的结果作为参数传递，而不是在方法内部执行 require(param) 。
render() {
return (
<ScrollView>
{this.renderMenuItem("CATALOGO", require('../../img/hp_catalogo.jpg'), this.goToCatalogo)}
{this.renderMenuItem("NOVITà PRODOTTI", require('../../img/hp_novita.jpg'), this.goToNovita)}
</ScrollView>);
}
renderMenuItem(name, imagePath, func ){
return (
<TouchableOpacity onPress={func} style={styles.box}>
<ImageBackground
source={imagePath}
style={styles.image}>
<Text>{name}</Text>
</ImageBackground>
<TouchableOpacity>);
}
