1

我正在为 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')}

但这并不能解决。

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

4

1 回答 1

1

关于这个 github 问题的讨论有点令人困惑，但最终让我得到了正确的答案。

  1. 把你的图片放在下面windows\\{yourprojectname}\Image
  2. 在 Visual Studio 中打开 Windows 解决方案windows\\{yourprojectname}.sln
  3. 在解决方案资源管理器的顶部，单击“显示所有文件”。
  4. 展开您的通用 Windows 应用程序的项目，找到图像文件夹，右键单击您的图像文件并选择“包含在项目中”。保存所有文件。
  5. 重启 react-native

您现在可以参考您的图像：
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>

于 2021-03-13T22:35:22.817 回答