如何处理 tvOS 和 Android TV 之间的 React Native 应用程序中的缩放问题？

Posted 2023-04-15

【中文标题】如何处理 tvOS 和 Android TV 之间的 React Native 应用程序中的缩放问题？

【英文标题】：How do I handle scaling issues in a React Native app between tvOS and Android TV?

【发布时间】：2020-06-29 21:22:39

【问题描述】：

Apple TV 的原始分辨率似乎是 1920x1080（如预期的那样），但对于 android TV / Fire TV，它似乎是 961.5022957581195x540.8450413639423（根据 Dimensions.get('window')）。

所以，当我在 Apple TV 上运行我的应用程序时，一切看起来都很好。但是当我在 Android TV 上运行它时，屏幕上没有任何东西。

有没有办法强制 Android TV 缩小所有内容？还是我必须为不同的设备创建两个不同的样式表来更改我所有组件的字体大小和尺寸？

【参考方案1】：

使用 Platform.OS 检查平台并使用样式中的边距属性以在 android 屏幕上正确显示内容。这是 android tv 中的正常行为。

【参考方案2】：

您在 React Native 中有 PixelRatio 和 Dimensions 用于此目的。除此之外，您还需要使用 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 呈现 UI。

【参考方案3】：

我们使用不同的方法，在电视的基础应用程序类上添加这个

class TvApplication extends Application 

    @Override
    protected void attachBaseContext(Context base) 
        Configuration configuration = new Configuration(base.getResources().getConfiguration());
        configuration.densityDpi = configuration.densityDpi / 2;

        Context newContext = base.createConfigurationContext(configuration);

        super.attachBaseContext(newContext);
    

这样，我们在使用尺寸时具有一致的宽度和高度，并且我们可以在所有平台上使用相同的样式值，而无需在 JS 端进行任何操作。

它并不完美，但在为多个平台构建时更方便