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

Question

加载大型捆绑图像时质量确实很低,即使使用时也是如此resizeMethod="resize".这仅在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>
    );
  }
}
...

自9月份以来,我已经向RN repo 创建了一个Github问题,但没有人回复,这让我觉得我做错了.是否有新的道具或其他方法使RN 0.57.x中的大图像显示正常且质量一般？也许METR obuilder更新0.57.x已经改变了打捆如何处理图像资产？我使用resizeMethod道具"scale"并"resize"没有任何区别.我已经使用PNG8,PNG24并且PNG32所有相同的结果.

编辑

在Github上回购的代码和PNG图像文件:https://github.com/clytras/RN057ImageTest

请不要放弃对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 中 API 的帮助来自动设置图像的宽度和高度。Dimension

例子：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>

我希望我能帮助你。