如何在React Native中显示类似Android的显示分区？

Question

我正计划构建一个反应本机应用程序。该应用程序针对3个主要方面。

1ft =>手机（IOS，ANDROID），

2ft =>平板电脑，

10ft => Android TV。

我们如何创建文件，以便如果我要为1ft（Mobiles）进行构建，则该应用程序应仅容纳1ft文件，例如

例如； 1ft_android.js，1ft_ios.js

例如； 2ft_android.js，2ft_ios.js

同样，在不使用Platform的情况下如何单独构建。选择Or是否有机会使用口味，有没有办法做到这一点？

  

编辑1：我的文件夹结构如下：

  

我想找到一种方法让反应知道如果显示指标匹配   1英尺，然后着陆。1ft.android.js。我不想比较显示   指标。我正在寻找一些配置，所以会做出反应   选择相应文件，就像选择平台特定文件一样。

Answer 1

对于特定于平台的用户界面，您可以使用“平台”模块进行切换。

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

  

但是，如果您想创建自适应UI来调整其形状   屏幕尺寸和大小，您可以使用以下方法：

Flex：https://facebook.github.io/react-native/docs/height-and-width#flex-dimensions

屏幕比例：

var deviceWidth: Dimensions.get('window').width;
...
myImage { width: deviceWidth, height: deviceWidth * 0.5 }

  

对于字体大小，您可以使用此功能：

export const getAdjustedFontSize = (size) => {
    return parseInt(size) * metrics.screenWidth * (1.8 - 0.002 * metrics.screenWidth) / 400;
};

编辑：

您也可以参考以下链接：https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23