React Native要求不适用于图像源

cwtwac6a  于 2023-01-18  发布在  React
关注(0)|答案(2)|浏览(191)

给定以下代码,响应本机抱怨

Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install".

但是如果我在require调用中硬编码图像源路径,同样的代码也能正常工作。

代码无效:有一个方法调用来确定图标名称。请注意require('../../images/'+imageIconNameFor(prediction.type)行。

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";
}

代码工作:不用调用方法来确定图标名称,如果我在require调用中硬编码图标名称,它就能正常工作。

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";
}

为什么当我连接字符串以构建图像源时会有不同的行为?
为什么require('../../images/'+imageIconNameFor(prediction.type)无法渲染图像,而require('../../images/Foo.png')可以正常工作?
请注意,方法调用不是问题。错误消息包含使用方法调用计算的映像的完整路径。尽管路径完整,但react native仍抱怨缺少带有require的模块。
React本机版本是0.37.0。我在ios模拟器上测试了这个。

qyzbxkaa

qyzbxkaa1#

不幸的是,这是react-native packager的工作方式,require中的映像名称必须是静态的。下面是来自官方docs的示例:

// 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} />
btqmn9zl

btqmn9zl2#

一定给予这样的风格
〈图片来源={{uri:'https://reactjs.org/logo-og.png'}}样式={{宽度:400,高度:400}} /〉

相关问题