ios - 在 React Native 中动态需要图像

Question

React Native(0.21)的文档指出，只能静态加载图片，即如果文件名以某种方式提前知道:

Note that in order for this to work, the image name in require has to be known statically.

来源: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 文件中配置的。

有没有办法在 React Native 中使用本地图像文件？如果我知道文件的位置，我可以通过 file:// 协议(protocol)加载它们？应用程序在 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如果您的应用需要在纵向和横向模式下工作。