React native react native要求不适用于图像源

React native react native要求不适用于图像源,react-native,React Native,给出以下代码,回应本地投诉 Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install". 编码工作:如果我在requirecall中硬编码图标名称,而不是调用一个方法来确定图标名称,那么它工作正常。请注意require('../../images/Foo.png')行 const P

给出以下代码,回应本地投诉

Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install". 编码工作:如果我在requirecall中硬编码图标名称,而不是调用一个方法来确定图标名称,那么它工作正常。请注意
require('../../images/Foo.png')

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
    <View style={styles.predictionItem}>
        <Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image>
    </View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
    return "Foo.png";
}
const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
    <View style={styles.predictionItem}>
        <Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image>
    </View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
    return "Foo.png";
}
const PredictionItem=({prediction})=>(
itemPressed()}>
);
函数imageIconNameFor(predictionType){
返回“Foo.png”;
}
为什么在连接字符串以构建图像源时会出现不同的行为?
为什么
require('../../images/'+imageIconNameFor(prediction.type)
无法渲染图像,但
require('../../images/Foo.png'))
工作正常?

请注意,方法调用不是问题。错误消息包含使用方法调用计算的映像的完整路径。尽管有完整的路径,但仍会抱怨缺少带require的模块。

React本机版本是0.37.0。我在ios模拟器上对此进行了测试。

不幸的是,React本机packager就是这样工作的,require中的映像名必须静态已知。以下是官方提供的示例:

//很好
//坏的
var icon=this.props.active?'my icon active':'my icon inactive';
//好
var icon=this.props.active?require('./my icon active.png'):require('./my icon inactive.png');

谢谢。我忽略了文档。我假设concate可以工作。谢谢你提供答案不工作兄弟…我的图像路径来自json,所以我必须在require函数中提供变量,所以我必须do@M.HassamYahya您可以改用
source={{uri:variable.urlPath}
// 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} />