windows UWP 的 react-native - 如何加载本地光栅图像资源

react-native for windows UWP - how to load local raster image resource

我正在为 windows UWP 使用 react-native。我不明白如何加载我想与应用程序打包的本地光栅图像资产。我目前将图像文件放在 windows/foobar/Assets/ 中（其中 foobar 是应用程序的名称）。我最初的假设是我可以像这样在源代码中简单地要求它们：

<Image style={{ width: 50, height: 50}} uri={require('./windows/foobar/Assets/energy.png')} />

这适用于 svg 文件，但对于光栅文件出错，表示它无法定义模块。这是有道理的，因为 require 用于加载模块，而光栅文件绝对不是。 VS Code 试图通过不自动完成 Assets/.

下的任何光栅文件来帮助我理解这一点

但是我在网上看到了一些我可以做的例子：

source={require('@expo/snack-static/react-native-logo.png')}

我不明白为什么这种格式可以工作但本地路径会失败。

我看到其他示例说明我应该使用：

uri={require('ms-appx:///ReactAssets/energy.png')}

但这并没有解决。

最终我假设我需要告诉 windows 的 react-native 我想包含在我的应用程序中的资产，以便它们可以通过某种资源包解决，但我没有找到任何有关如何完成此操作的文档。我该怎么办？

讨论 on this github issue 有点令人困惑，但最终让我找到了正确的答案。

  1. 将您的图片放在 windows\{yourprojectname}\Image
    2. 下
  2. 在 Visual Studio windows\{yourprojectname}.sln
    3. 打开 windows 解决方案
  3. 在解决方案资源管理器的顶部，单击 'show all files'。
  4. 展开通用 Windows 应用程序的项目，找到图像文件夹，右键单击图像文件并 select 'Include in project'。保存所有文件。
  5. 重启 react-native

您现在可以通过以下方式引用您的图像：
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>