反应本机0.57.x< Image />大图像质量低 [英] React Native 0.57.x <Image/> large images low quality

问题描述

加载大型捆绑图像时，即使使用 resizeMethod = resize ，质量也确实很差。 这仅在Android上发生，而不在任何iOS模拟器/设备上发生。已在Android 8.1模拟器和带有Android 8.0的LG G6上进行了测试。请参见下面的屏幕截图。

There is really low quality when loading large bundled images, even when using resizeMethod="resize". This happens only on Android, not on any iOS simulator/device. Have tested it on Android 8.1 emulator and LG G6 with Android 8.0. Please see the screenshots bellow.

在左侧的屏幕截图我们看到在 RN 0.56.0 上运行的代码完全相同，在右侧的屏幕截图中，我们看到了 RN 0.57.5 。代码只是一个简单的图像< Image source = {require（'./ assets / ELHall1.png'）} resizeMethod = resize /> 和该图像尺寸为 2111 x 4645像素。这两个项目都是使用 react-native init RN057ImageTest 和 react-native init --version = 0.56.0 RN056ImageTest 。

At the left screenshot we see the exact same code running with RN 0.56.0 and at the right screenshot we see RN 0.57.5. The code is just a simple image <Image source={require('./assets/ELHall1.png')} resizeMethod="resize" /> and the image size is 2111 x 4645 pixels. Both projects are fresh installed using react-native init RN057ImageTest and 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月以来， Github问题到RN回购，但没人回答，这让我觉得我做错了。是否有新的道具或其他方法可以使大图像在 RN 0.57.x 中完全正常显示？也许metr obuilder更新到 0.57.x 了，捆绑程序处理图像资产的方式如何？我已经使用 resizeMethod 道具来 scale 和 resize 完全没有区别。我使用了 PNG8 ， PNG24 和 PNG32 都相同的结果。

I have created a Github issue to RN repo since September but noone has replied which makes me think that I am doing something wrong. Is there a new prop or an other way to make large images show normal with full quality in RN 0.57.x? Maybe the metr obuilder updates to 0.57.x have changed how the bundler handles the image assets? I have used resizeMethod prop to "scale" and "resize" with no difference at all. I have used PNG8, PNG24 and PNG32 all same result.

编辑

Github存储库包含代码和PNG图像文件： https://github.com/clytras/RN057ImageTest


请不要给出有关JPEG图像的任何答案，并且它们确实起作用，我已经知道；我想让PNG图像像在RN 0.56中一样工作。

The Github repo with the code and the PNG image files: https://github.com/clytras/RN057ImageTest

Please don't give any answers about JPEG images and that they do work, I already know that; I want to make PNG images work like they do in RN 0.56.

UPDATE JAN / 2020

这是针对此问题着陆人员的更新。

This is an update for people landing here regarding this issue.

RN问题自2019年8月10日起已关闭，声明为不是React Native问题，而是壁画问题。

The RN Issue has been closed since August 10, 2019 with the statement that this is not a React Native issue but rather a Fresco issue.

我创建了在2019年8月22日在壁画上发出的问题，在经过一些交谈和交谈之后，现在禁用图像降采样的一种方法是在删除/注释掉 DecodeProducer.java 。

I have created an issue at Fresco on August 22, 2019 and after some conversations and talkings, the only way for now to disable image downsample, is to compile Fresco from source after removing/comment out the downsample code inside DecodeProducer.java.

我创建了一个具有RN 0.61的存储库，并详细说明了如何编译Fresco和禁用图像下采样。可以在以下位置找到该存储库： https://github.com/clytras/RN061FrescoBuild 。

I have created a repository that has RN 0.61 and has detailed instructions on how to compile Fresco and disable image downsample. The repository can be found here: https://github.com/clytras/RN061FrescoBuild.

事实证明，壁画有一个错误，无法使用 ImagePipelineConfig 和 MainPackageConfig 应用壁画配置 MainApplication.java 中，您可以看到有关此此处。 RN默认情况下禁用向下采样！在Fresco解决此问题之前，禁用图像向下采样的唯一方法是在删除向下采样代码后从源代码编译Fresco。

It turns out Fresco has a bug and does not apply Fresco configuration using ImagePipelineConfig and MainPackageConfig inside MainApplication.java, you can see more details about this here. RN has downsampling disabled by default! Until Fresco fixes this issue, the only way to disable image downsampling is to compile Fresco from source after removing the downsample code.

UPDATE FEB / 2020 >

我创建了一个 react- native-community / cli 模板，该模板具有RN 0.61.5项目以及从源代码构建Fresco所需的修改。这是一种使用自定义项目名称以及需要从源代码编译Fresco进行更改的新RN项目的简便方法。它还使用 Android NDK修订版21 ，我已经在MacOS和Windows上使用yarn 1.21对其进行了测试。

I have created a react-native-community/cli template that has RN 0.61.5 project and the required modifications to build Fresco from source. This is an easy and quick way to have a new RN project crafted with custom project name and with the changes needed to compile Fresco from source. It also uses Android NDK Revision 21 and I have tested it on macOS and Windows using yarn 1.21.

Github存储库： clytras / react-native-fresco

NPM模板： @ lytrax / react-native-fresco

Github repository: clytras/react-native-fresco
NPM template: @lytrax/react-native-fresco

它可以这样安装：

npx @react-native-community/cli@next init --template=@lytrax/react-native-fresco <ProjectName>

自述文件。您需要使用 yarn壁画设置克隆/修补壁画，然后安装Android NDK并创建 android / libraries / fresco / local.properties 和Android NDK路径。

There are detailed installation instruction in the README. You need to clone/patch Fresco using yarn fresco-setup and then install Android NDK and create android/libraries/fresco/local.properties with Android NDK path.

推荐答案

在大多数情况下，UI设计者所关注的是图像的尺寸根据标准的高端手机（具有固定的屏幕尺寸）进行设计，并将图像以.png格式导出到xhdpi，xxhdpi和xxxhdpi分辨率。因此，开发人员通过附加@ 1x，@ 2x&这些分辨率的@ 3倍。例如： ELHall1 @ 1x，ELHall1 @ 2x，ELHall1 @ 3x 。

Most of the times it is the dimensions of the Image that matter, UI designers make Designs to standard high end Mobile phones(with fixed Screen Size) and export the Images as .png to xhdpi,xxhdpi and xxxhdpi resolutions. So developers rename those Images by appending @1x, @2x & @3x to those resolutions. Example: ELHall1@1x ,ELHall1@2x, ELHall1@3x.

导入图像时使用标准名称图片。 示例：ELHall1.png 。

When Importing Images use the standard name of the Image. Example: ELHall1.png.

解决方法< Image> 标签我在React-Native中使用 Dimension API的帮助来自动设置Image的宽度和高度。

To workaround <Image> tag I use the help of Dimension API in React-Native to auto set the width and height of the Image most of the time.

示例： var {height，width} = Dimensions.get（'window'）;

例如，如果图像必须覆盖整个屏幕，我会这样做，

For Example, if the Image has to cover the whole screen, I would do,

 <View style={{flex:1,width:"100%",height:"100%"}}>
    <Image style={{width:width, height:height}} source={require('./assets/ELHall1.png')}  /> 
    // width & height is auto taken using Dimension API
    // To play around pixels use resizeMode= ("contain","center") (Keep this as last option)
  </View>

希望我能为您提供帮助。

I Hope I could help you.

这篇关于反应本机0.57.x< Image />大图像质量低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！