Как мне решить проблемы с масштабированием в приложении React Native между tvOS и Android TV? - PullRequest
Новая
       97

Как мне решить проблемы с масштабированием в приложении React Native между tvOS и Android TV?

0 голосов
/ 18 марта 2020

Собственное разрешение для Apple TV, похоже, составляет 1920x1080 (как и ожидалось), но для Android TV / Fire TV оно составляет 961.5022957581195x540.8450413639423 (согласно Dimensions.get('window')).

Итак, когда Я запускаю свое приложение на Apple TV, все выглядит нормально. Но когда я запускаю его на телевизоре Android, на экране ничего не помещается.

Есть ли способ заставить телевизор Android уменьшить все? Или мне нужно создать две разные таблицы стилей для разных устройств, чтобы изменить размеры шрифта и размеры всех моих компонентов?

Ответы [ 2 ]

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

У вас есть PixelRatio и Dimensions для этой цели в React Native. Наряду с этим вам необходимо использовать модуль RN react-native-pixel-perfect, благодаря чему пиксель вашего приложения будет идеальным на всех устройствах, быстро и легко 

import {PixelRatio, Dimensions} from 'react-native';
import {create} from 'react-native-pixel-perfect';

let displayProps = {
  width: PixelRatio.roundToNearestPixel(
    Dimensions.get('window').width * PixelRatio.get(),
  ),
  height: PixelRatio.roundToNearestPixel(
    Dimensions.get('window').height * PixelRatio.get(),
  ),
};

let perfectSize = create(displayProps);

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

 const styles = StyleSheet.create({
   container: {
    width: perfectSize(500),
    height: perfectSize(300)
   }
 });

Ваш контейнер будет корректно адаптироваться к устройствам. На основе их разрешения экрана.

В случае, если у вас есть минимальная высота x ширина для поддержки, но некоторые устройства меньше, чем минимальное разрешение экрана, и вы все равно хотите добиться тех же результатов на этих устройствах. Затем вы можете установить минимальное разрешение экрана для этой функции, как показано ниже. 

let displayProps = {
  width: PixelRatio.roundToNearestPixel(
    Math.max(1920, Dimensions.get('window').width * PixelRatio.get()),
  ),
  height: PixelRatio.roundToNearestPixel(
    Math.max(1080, Dimensions.get('window').height * PixelRatio.get()),
  ),
};

Так что в моем случае, если разрешение экрана меньше, чем 1920x1080, скажем, устройства 720p, то это поможет визуализировать пользовательский интерфейс в 1920x1080.

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

Используйте Platform.OS для проверки платформы и используйте свойство margin в стилях, чтобы получить содержимое прямо на экране в android. Это нормальное поведение в android тв.

...