在 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 文件系统中的应用程序位置是否存在常量或变量？

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。