在React Native中動態地需要圖像

Question

React native（0.21）的文檔指出，只有靜態加載圖片，即文件名是否以某種方式預先知道：

請注意，為了使其工作，必須靜態地知道require中的圖像名稱。

資料來源： 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 。