Question

我正在尝试从.env vars要求路径，但这不起作用，我不知道是否是因为它不可能要求动态路径，还是因为是因为编译顺序不同，所以我发现atm是使用base64编码的图像。

只是为了获得更好的上下文： 我使用react-native-config只是为了指出RN应该查看哪个.env文件，因为当前react-native-config尚未在RN 0.60+中正常工作，因此我将其与react-native-build-config一起使用，以将这些vars暴露给我的.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）图像的良好做法。对于更大尺寸的图像，您可以使用。缩略图。

如何处理本机图像，请检查此link。

读取本机图像：

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

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

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

在React本机应用程序中设置.env

->您可以使用 react-native-config 。它允许您指定.env文件以将变量导入代码中。要安装，请检查以下内容：doc

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

反应本机。从.env vars要求路径

1 个答案: