android - React Native 0.57.x 大图像低质量

Question

即使使用 resizeMethod="resize" 加载大型 bundle 图像时，质量确实很低. 这只发生在 Android 上，不会发生在任何 iOS 模拟器/设备上。已在 Android 8.1 模拟器和 LG G6 与 Android 8.0 上对其进行测试。请查看下面的屏幕截图。

在左侧屏幕截图中，我们看到使用 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>
    );
  }
}
...

我创建了一个 Github issue自 9 月以来到 RN repo ，但没有人回复，这让我觉得我做错了什么。在 RN 0.57.x 中是否有新的 Prop 或其他方法可以使大图像以完整质量正常显示？也许 metr obuilder 更新到 0.57.x 已经改变了 bundler 处理图像 Assets 的方式？我用过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 问题。

我创建了一个 issue at Fresco在 2019 年 8 月 22 日，经过一些对话和交谈，目前禁用图像下采样的唯一方法是在删除/注释掉内部的下采样代码后从源代码编译 Fresco DecodeProducer.java .

我创建了一个包含 RN 0.61 的存储库，其中包含有关如何编译 Fresco 和禁用图像下采样的详细说明。存储库可以在这里找到:https://github.com/clytras/RN061FrescoBuild .

事实证明，Fresco 有一个错误，不会使用 ImagePipelineConfig 应用 Fresco 配置。和 MainPackageConfig里面MainApplication.java , 你可以看到关于这个的更多细节here . RN 默认禁用下采样!在 Fresco 修复此问题之前，禁用图像下采样的唯一方法是在删除下采样代码后从源代码编译 Fresco。

2020 年 2 月更新

我创建了一个 react-native-community/cli具有 RN 0.61.5 项目和从源代码构建 Fresco 所需的修改的模板。这是一种使用自定义项目名称制作新 RN 项目以及从源代码编译 Fresco 所需更改的简单快捷方法。它还使用 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/libraries/fresco/local.properties带有 Android NDK 路径。

Answer 1

我测试了FastImage而且质量更好

<FastImage source={require('./assets/ELHall1.png')} style={{height: '100%', aspectRatio: 2.5}} />