Question

根据以下代码，回应原生抱怨

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调用中对图标名称进行硬编码，而不是调用方法来确定图标名称，它可以正常工作。请注意require('../../images/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";
}

为什么在连接字符串以构建图像源时会出现不同的行为？为什么require('../../images/'+imageIconNameFor(prediction.type)无法呈现图片但require('../../images/Foo.png')工作正常？

请注意，方法调用不是问题。错误消息包含使用方法调用计算的图像的完整路径。尽管有完整的路径，但本地人反应抱怨缺少模块的要求 React原生版本 0.37.0 。我在ios-simulator上测试了这个。

Answer 1

不幸的是，这就是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} />

本机反应需要不适用于图像源

1 个答案: