Разрешение для отзывчивого изображения в реагирует родное (не размытое на телефоне и планшете) - PullRequest
Новая
       9

Разрешение для отзывчивого изображения в реагирует родное (не размытое на телефоне и планшете)

0 голосов
/ 10 апреля 2020

Я хочу отобразить квадратное изображение на заднем плане при ширине устройства 80%. В настоящее время я занимаюсь разработкой стандартного телефона (MDPI). Итак, на этой странице: https://developer.android.com/training/multiscreen/screendensities У меня телефон с разрешением 160 точек на дюйм, я хочу, чтобы мое изображение было размером около 2 дюймов, мое изображение должно иметь разрешение 320x320 пикселей. затем изображение @ 2x 640px и @ 3x 960px. На данный момент я правильно понимаю?

Но если я возьму телефон большего размера, 80% ширины может составить 2,5 дюйма, мое изображение больше не будет достаточно большим. Хуже того, 80% таблетки представляет собой гораздо больший размер. На этой странице: https://developer.android.com/training/multiscreen/screensizes Я понимаю, что они объясняют размер, необходимый для каждого размера экрана: 

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-xlarge/main_activity.xml    # For large tablets (960dp x 720dp and bigger)

Так что мне следует использовать это? Но это Android конкретная c разработка, существует ли она в реакции-нативной? Если нет, я больше не должен использовать изображения @ 2x и @ 3x? или я должен сделать: 

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout/main_activity@2x.xml
res/layout/main_activity@3x.xml
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-large/main_activity@2.xml  
res/layout-large/main_activity@3.xml 
...

Для этого конкретного изображения это формат .svg. Я видел, что могу преобразовать его из. xml из android studio и открыть его с помощью библиотеки svg? Это лучший вариант? (ответы на предыдущие вопросы по-прежнему интересуют меня, я не уверен, что у меня будут только файлы .svg)

И, наконец, когда мы используем 3 формата изображений (icon.png, icon@2x.png и icon@3x.png), они все в последнем apk? Если так, то почему бы просто не использовать больший формат и уменьшить его для экранов с меньшей плотностью?

Я бы подумал, что эти вопросы должны быть довольно частыми, но невозможно найти четкий ответ ...

Спасибо

1 Ответ

0 голосов
/ 10 апреля 2020

Если вы используете реагирующую натуру;

1) Местоположение актива:

Не создавайте свои изображения в своем Android проект, используйте вместо него реакционную систему. Поместите свои файлы в свой реактивный проект и используйте их в своих компонентах.

2) Использование SVG

Если у вас есть тип SVG, доступный в вашем проекте, тогда используйте act-native-svg . Reaction-native-svg использует собственные библиотеки чертежей, поэтому он будет работать на всех устройствах. Вам нужно создать SVG-компонент с правильными размерами. Если вы масштабируете их позже, вы получите размытый вывод. Вы можете проверить это, создав SVG-компонент с размерами {width: 20, height: 20}. Затем масштабируйте его до 3х или около того, вы получите размытый результат. Поэтому будьте осторожны с размерами.

Предпочитайте SVG файлам PNG, последние всегда дороги в рендеринге. Существуют некоторые недостатки, такие как создание SVG не так просто, как-native-svg не поддерживает все форматы SVG.

В вашем случае вам необходимо получить ширину и высоту устройства и рассчитать ширину и высоту SVG. Например: 

<YourSVGComponent 
  width={Dimensions.get('window').width * 0.8}
  height={Dimensions.get('window').height * 0.8} />

3) суффиксы @ 2x и @ 3x

Все ресурсы в вашем проекте будут сопоставлены с вашими проектами iOS и Android при создании IPA или APK соответственно. Цель разных разрешений - поддерживать разные плотности.

С Реакция собственной документации : 

└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

Например, check@2x.png, будет использоваться на iPhone 7, а check@3x.png будет использоваться на iPhone 7 Plus или Nexus 5. Если изображение не соответствует плотности экрана, будет выбран ближайший лучший вариант.

...