如何处理React Native应用程序在tvOS和Android电视之间的缩放问题

Question

苹果电视的本机分辨率似乎为1920x1080(如预期(，但安卓电视/Fire电视的分辨率似乎为961.5022957581195x540.8450413639423(根据Dimensions.get('window')(。

所以，当我在苹果电视上运行我的应用程序时，一切看起来都很好。但当我在安卓电视上运行它时，屏幕上什么都不适合。

有没有办法强迫安卓电视缩小所有内容？或者，我必须为不同的设备创建两个不同的样式表来更改所有组件的字体大小和尺寸吗？

Answer 1

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

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端进行任何操作。

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

Answer 2

使用Platform.OS检查平台，并在样式中使用margin属性，以在android中获得正确的屏幕内容。这是安卓电视中的正常行为。

Answer 3

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设备，那么这将有助于以1920x11080呈现UI。