javascript - react native 。需要 .env 变量的路径

Question

我试图要求 .env 变量中的路径，但这不起作用，我不知道是否因为不可能需要动态路径，或者是否因为编译顺序的原因，无论哪种方式，解决方法我发现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 编码的字符串，然后再解码图像，这会引入额外的一层不必要的工作。

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

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

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

如何在React Native中处理图像，查看这个link .

<小时/>

在react-native中读取本 map 片:

您可以使用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