陣營機映像組成部分，需要未知模塊

Question

該文檔使它很清楚，你不能做任何動態要求：

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

我有一個不那麼然而添油加醋的使用情況，我有一個ListView，並在renderRow方法中，我想渲染一個圖像，取決於所述行中的一些數據。比如我想渲染../img/12.png，通過做

<Image style={styles.thumb} source={require("../img/12.png")} /> 

工作正常，但是

let imagePath = "../img/" + row.number + ".png"; // row.number being 12 
<Image style={styles.thumb} source={require(imagePath)} /> 

提供了以下錯誤：

Requiring unknown module "../img/12.png" 

有任何解決方法在這裏，它似乎仍然結束要求完全相同的字符串，它只是不起作用

Answer 1

你需要做的：

let imagePath = require("../img/" + row.number + ".png") 
<Image style={styles.thumb} source={imagePath} /> 

Answer 2

好吧我想通了，我想我會張貼一個答案，以防萬一未來有這樣的鬥爭。

答案是你需要明確地要求所有的圖像，否則他們將不被捆綁，因此未知的模塊錯誤。

解決方案： 在另一個文件中，我創建並導出了一個按號碼鍵入的對象，值爲require（「../ img/x.png」），其中x是鍵。 然後在我的ListView的renderRow方法中，通過使用row鍵入對象，將圖像從對象中拉出。