反应原生。需要来自 .env vars 的路径

Question

我试图要求来自 .env vars 的路径，但这不起作用，我不知道是因为它不可能要求动态路径，还是因为编译的顺序，无论哪种方式，解决方法我发现 atm 是使用 base64 编码的图像。

只是为了更好的上下文：我使用 react-native-config 只是为了指出 RN 应该查看的 .env 文件，因为目前 react-native-config 在 RN 中无法正常工作0.60+ 所以我用它和react-native-build-config 将这些变量暴露给我的.js（如果你能在这里给我任何建议，我会很高兴）

例如

//.env
IMAGE_SOURCE='base64SourceHere'

.

//myComponent.js 
const imageSrc = BuildConfig.IMAGE_SOURCE

<Image style={{ width: 50, height: 50 }} source={ uri: imageSrc } resizeMode="contain"/>

我的问题是.. base64 编码图像是一种不好的做法吗？如果是，即使不是，有什么建议吗？我可以将 uri 用于本地文件路径吗？

Answer 1

什么是 Base64？
Base64 是一种编码和解码技术，用于将二进制数据转换为美国信息交换标准 (ASCII) 文本格式，反之亦然。

Base64 是一种相对有效的二进制数据编码方式，平均而言仍会增加 25% 以上的文件大小。这不仅会增加您的带宽费用，还会增加下载时间。

CPU 开销
在使用 Base64 传送图像时，浏览器首先需要对 Base64 编码的字符串进行解码，然后再对图像进行解码，这就引入了额外的一层不必要的工作。

缓存问题
第三个问题可能是最大的性能杀手，但乍一看可能不是最明显的。当用户访问您的网站时，浏览器会自动将图像缓存在本地，然后在再次访问同一页面时直接从您的磁盘加载它们。由于 Base64 的工作原理，浏览器无法在本地存储图像，因此它总是需要从您的服务器或 CDN 获取它们，这会在您的服务器上产生额外的负载并增加您的带宽费用。

来源链接：doc
其他更多信息：doc

Base64 图像有用：
它只对非常小的图像有用。 Base64 编码文件比原始文件大。
Bas64 编码图像是小尺寸 (KB) 图像的良好做法。对于更大尺寸的图像，您可以使用 .缩略图。

如何在 react native 中处理图片，查看link。

---

在 react-native 中读取本地图片：

您可以使用react-native-fs 获取适用于两个平台的目录

var RNFS = require('react-native-fs');

<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/example.png'}} />

---

在 React Native 应用程序中设置 .env

-->你可以使用 react-native-config。它允许您指定一个 .env 文件以将变量导入您的代码。安装检查：doc

--> react-native-dotenv 是 React Native 中 .env 文件的另一种解决方案。安装请查看：doc