Question

即使加载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 中正常显示？也许metr obuilder更新到 0.57.x 了，捆绑程序处理图像资产的方式如何？我对resizeMethod和"scale"使用了"resize"道具，一点都没有区别。我用过PNG8，PNG24和PNG32都是相同的结果。

编辑

带有代码和PNG图片文件的Github repo：https://github.com/clytras/RN057ImageTest

already know that，请不要给出有关JPEG图像的任何答案，并且它们确实可以工作。我想让PNG图像像在RN 0.56中一样工作。

Answer 1

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

导入图像时，请使用图像的标准名称。 Example: ELHall1.png。

要解决<Image>标签，我在React-Native中使用Dimension API的帮助来在大多数情况下自动设置Image的宽度和高度。

示例：var {height, width} = Dimensions.get('window');

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

 <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>

希望我能为您提供帮助。

Answer 2

我测试了FastImage，它的质量更高

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

Answer 3

使用“ ImageBackground”代替大图片。

import {
  ImageBackground,
} from 'react-native';


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

Answer 4

这是将@clytras补丁应用于现有项目的方法。而且它不能再运行android模拟器了。我一直在真实设备上进行测试。 ?

将脚本添加到package.json

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0",
"fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java",
"fresco-setup": "yarn fresco-clone && yarn fresco-patch"

创建补丁/DecodeProducer.java.diff

“纱壁画补丁”

结果

@@ -7279,32 +7279,35 @@

+// 
 if (mDownsampleE
@@ -7381,24 +7381,27 @@

+// 
   ImageReque
@@ -7460,24 +7460,27 @@

+// 
   if (mDowns
@@ -7513,24 +7513,27 @@

+ //
        %7C%7C !U
@@ -7587,36 +7587,39 @@

+//

+ 
 encodedImage.set
@@ -7637,32 +7637,35 @@
 %0A               
+ //
          Downsam
@@ -7700,32 +7700,35 @@
 %0A               
+ //
              req
@@ -7762,32 +7762,35 @@

+// 
             requ
@@ -7820,32 +7820,35 @@
 %0A               
+ //
              enc
@@ -7866,32 +7866,35 @@

+// 
             maxB
@@ -7914,32 +7914,35 @@

+// 
   %7D%0A            
@@ -7937,32 +7937,35 @@

+// 
 %7D%0A%0A             
@@ -7962,24 +7962,27 @@

+ //
  if (produce
@@ -8002,28 +8002,31 @@

+//

+ 
 .getImagePip
@@ -8050,24 +8050,27 @@

+ //
      .getExp
@@ -8091,24 +8091,27 @@

+ //
      .should
@@ -8151,24 +8151,27 @@

+// 
   maybeIncre
@@ -8206,32 +8206,35 @@
 %0A               
+ //
  %7D%0A%0A

编辑android / settings.gradle

在includeBuild ('libraries/fresco')之前添加include ':app'

rootProject.name = 'YOURPROJECT'
...
includeBuild ('libraries/fresco') 

include ':app'

android / build.gradle

使用gradle依赖性为3.4.1

dependencies {
  ...
  classpath("com.android.tools.build:gradle:3.4.1")
  ...
}

运行脚本

yarn fresco-setup

下载android ndk

我使用了r21版本。

https://developer.android.com/ndk/downloads

解压缩并移动ndk

解压缩NDK 我将ndk解压缩到Users/YOURNAME/Library/Android/android-ndk-r21 并在您的项目中创建android/libraries/fresco/local.properties

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

运行android

仅此而已。

yarn android并检查大图像质量。

感谢@clytras

https://github.com/clytras/react-native-fresco

原始答案：https://github.com/facebook/fresco/issues/2397#issuecomment-626631033

React Native 0.57.x <img/>大图像质量低

4 个答案: