【发布时间】：2019-04-23 10:42:59
【问题描述】：
即使使用resizeMethod="resize"，加载大型捆绑图像时质量也确实很差。 这仅发生在 Android 上，不会发生在任何 iOS 模拟器/设备上。已在 Android 8.1 模拟器和带有 Android 8.0 的 LG G6 上对其进行了测试。请看下面的截图。
在左侧屏幕截图中，我们看到使用 RN 0.56.0 运行的完全相同的代码，在右侧屏幕截图中，我们看到 RN 0.57.5。代码只是一个简单的图像<Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />，图像大小为2111 x 4645 pixels。这两个项目都是使用react-native init RN057ImageTest 和react-native init --version="0.56.0" RN056ImageTest 全新安装的。
带有图片的简单应用
...
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
{/*<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>*/}
<Image source={require('./assets/ELHall1.png')} resizeMethod="resize" />
</View>
);
}
}
...
自 9 月以来，我已经为 RN 回购创建了一个 Github issue，但没有人回复，这让我觉得我做错了什么。在 RN 0.57.x 中是否有新的道具或其他方法可以使大图像以全质量正常显示？也许 Metro obuilder 更新到 0.57.x 改变了捆绑器处理图像资产的方式？我已经使用 resizeMethod 道具到 "scale" 和 "resize" 完全没有区别。我使用了PNG8、PNG24 和PNG32，结果都一样。
编辑
Github repo 带有代码和 PNG 图像文件：https://github.com/clytras/RN057ImageTest
请不要给出关于 JPEG 图像的任何答案，并且它们确实有效，我 already know that；我想让 PNG 图像像在 RN 0.56 中一样工作。
2020 年 1 月更新
这是关于此问题的更新。
RN Issue 自 2019 年 8 月 10 日起已关闭，并声明这是not a React Native issue，而是一个 Fresco 问题。
我在 2019 年 8 月 22 日创建了一个 issue at Fresco，经过一些对话和讨论，目前禁用图像下采样的唯一方法是在删除/注释掉 DecodeProducer.java 中的下采样代码后从源代码编译 Fresco .
我创建了一个包含 RN 0.61 的存储库，并详细说明了如何编译 Fresco 和禁用图像下采样。可以在此处找到存储库：https://github.com/clytras/RN061FrescoBuild。
事实证明，Fresco 有一个错误，并且在 MainApplication.java 中使用 ImagePipelineConfig 和 MainPackageConfig 无法应用 Fresco 配置，您可以查看有关此 here 的更多详细信息。 RN 默认禁用下采样！在 Fresco 修复此问题之前，禁用图像下采样的唯一方法是在删除下采样代码后从源代码编译 Fresco。
2020 年 2 月更新
我创建了一个 react-native-community/cli 模板，该模板具有 RN 0.61.5 项目和从源代码构建 Fresco 所需的修改。这是一种使用自定义项目名称和从源代码编译 Fresco 所需的更改来制作新 RN 项目的简单快捷的方法。它还使用 Android NDK Revision 21，我已经使用 yarn 1.21 在 macOS 和 Windows 上对其进行了测试。
Github 存储库：clytras/react-native-fresco
NPM 模板：@lytrax/react-native-fresco
可以这样安装：
npx @react-native-community/cli@next init --template=@lytrax/react-native-fresco <ProjectName>
在README中有详细的安装说明。您需要使用yarn fresco-setup 克隆/修补 Fresco，然后安装 Android NDK 并使用 Android NDK 路径创建android/libraries/fresco/local.properties。
【问题讨论】：
-
resizeMode="contain" 怎么样？另外，如果您在样式中添加 maxWidth:"100%" 属性会怎样？如果没有任何效果，那么我相信问题可能出在其他地方，也可能是某些设置在以特定方式控制 dpi 或缩放的设备中？
-
@LastBreath 我知道 EN 图像缩放，但我没有尝试过。我会尽快试一试，我会在这里回复。另外，我不关心
containresizeMode。 -
@LastBreath
resizeMode选项都不能解决质量问题。将宽度设置为 100% 也无济于事，并且质量不佳。这是不可能的，设备设置/功能在这里不相关。不要忘记它可以在使用 RN 0.56 的相同设备/模拟器上完美运行。 -
你尝试过 width 还是 maxWidth ？
-
@LastBreath
maxWidth也不起作用。我已经上传了一个 github 仓库。如果需要，请检查问题以获取链接。
标签： android reactjs react-native components bundler