要求圖像動態地做出反應原住民

Question

陣營原生（0.21）狀態的文檔，這是唯一可能的，靜態加載圖片，即如果文件名是事先以某種方式知：

注意，在爲了這個工作，需要的圖像名稱必須是靜態的。

來源：https://facebook.github.io/react-native/docs/images.html#content

給出一個例子：

// GOOD 
<Image source={require('./my-icon.png')} /> 

// BAD 
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 
<Image source={require('./' + icon + '.png')} /> 

不幸的是，在我的情況，我不知道事先圖片的文件名，因爲它們是在配置JSON文件。

有沒有辦法在本地使用本地圖像文件？如果我知道文件的位置，我可以通過file://協議加載它們？在iOS文件系統中，應用的位置是否有固定或變量？

Answer 1

是的，你可以動態地使用圖像。然而，他們被視爲網絡圖像。這意味着包裝員沒有附加任何圖像元數據（寬度，高度）。

如果您有幾張圖片，只需使用打包程序即可。

// GOOD 
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); 
<Image source={icon} /> 

另一種選擇是保存JSON中的元數據（寬度，高度）。您需要至少指定網絡圖像（或動態圖像）的高度。給定使用（React.Dimensions）的元數據（寬度，高度）和屏幕尺寸，選擇合適的高度是微不足道的。如果您的應用需要在縱向和橫向模式下工作，請使用react-native-orientation。