在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文件中配置的。

有没有办法在React Native中使用本地图像文件？如果我知道文件的位置，我可以通过“file://”协议加载它们。是否有一个常量或变量来指示应用在iOS文件系统中的位置？

- Rias

---

文档中提到源代码应该使用{{uri:'文件的本地路径'}}。我认为不应该使用file:/// Uri方案。尝试传递文件的绝对路径。 - agenthunt

什么是绝对路径。 - Rias

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。

- nmh

---

谢谢你的回答。你有关于如何将它们用作“网络图片”的提示吗？正确的图片路径是什么？它们是如何打包到应用程序中的？ - Rias