我试图要求 .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 作为本地文件路径吗?
最佳答案
什么是 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
关于javascript - react native 。需要 .env 变量的路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57559815/