React Native 0.57.x large images low quality

问题

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.

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.

Simple App with an Image

...
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>
    );
  }
}
...

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.

EDIT

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.

回答1:

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.

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

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.

Example: 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.

回答2:

I tested FastImage and it had a better quality

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

回答3:

Use 'ImageBackground' instead for large images.

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


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

来源：https://stackoverflow.com/questions/53402308/react-native-0-57-x-image-large-images-low-quality

标签

android