React Native 0.57.xбольшие изображения низкого качества

Question

При загрузке больших объединенных изображений качество действительно низкое, даже при использовании resizeMethod="resize". Это происходит только на Android, а не на любом симуляторе / устройстве iOS .Протестировали его на эмуляторе Android 8.1 и LG G6 с Android 8.0.Пожалуйста, смотрите скриншоты ниже.

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 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 {
  render() {
    return (
      
        {/*Welcome to React Native!
        To get started, edit App.js
        {instructions}*/}
        
      
    );
  }
}
...

I have created a Выпуск Github для репозитория RN с сентября, но никто не ответил, что заставляет меня думать, что я делаю что-то не так.Есть ли новая опора или другой способ сделать нормальные изображения большого размера с полным качеством в 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

Я тестировал FastImage , и он имел лучшее качество

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

Answer 2

Используйте 'ImageBackground' для больших изображений.

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


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

Answer 3

В большинстве случаев важны размеры изображения, дизайнеры пользовательского интерфейса создают проекты для стандартных мобильных телефонов высокого класса (с фиксированным размером экрана) и экспортируют изображения в формате .png в разрешения xhdpi, xxhdpi и xxxhdpi.Поэтому разработчики переименовывают эти изображения, добавляя @ 1x, @ 2x & @ 3x к этим разрешениям.Пример: ELHall1@1x ,ELHall1@2x, ELHall1@3x.

При импорте изображений используйте стандартное имя изображения.Example: ELHall1.png.

Для обхода тега <Image> Я использую помощь Dimension API в React-Native для автоматической установки ширины и высоты изображения большую часть времени.

Пример: 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>

Надеюсь, я мог бы вам помочь.