React native React Native-IPad的IOS字体大小/尺寸问题

我正在使用使用fontSize、width和height的React原生样式表机制实现非常简单的布局

期望：在不同的屏幕尺寸和分辨率下，布局应该是相同的

实际情况：IPad看起来很不一样——物体在屏幕外

我的假设正确吗？为什么会这样

安卓-惠维（5.5“）-好

安卓-nexus 7-足够好

IOS-Iphone 7-良好

IPad-坏！
[对象不在屏幕上-稍后将上载]

代码：

const styles=StyleSheet.flant({
时间容器：{
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
},
时间：{
玛金托普：50，
尺寸：50，
},
中学：{
颜色：“7575”，
尺寸：22，
对齐项目：“中心”
},
按钮容器：{
为内容辩护：“中心”，
对齐项目：“居中”，
},
容器：{
为内容辩护：“中心”，
对齐项目：“居中”，
},
按钮：{
容器：{
宽度：170，
身高：170，
边界半径：100，
玛金托普：30，
},
正文：{
尺寸：50，
}
}
});
类MyScreen扩展组件{
render（）{
...
返回(
{time}
{date}
{/*位置*/}
);
}
}

以下几点可以帮助您：

对于文本：获得完全相同的字体大小。确保两个平台中使用的字体相同。我们在android和ios中看到了不同的字体大小，但最终发现默认字体本身不同。因此，它们看起来不同

视图：对于视图和布局，请确保始终使用flex。使用flex，您可以实现与响应Web应用程序一样的所有功能。以像素为单位指定任何内容都会产生奇怪的结果。 这是因为不同的屏幕会有不同的DPI。因此每英寸的像素数会有所不同。虽然react native在无单位尺寸方面尝试了很多帮助。但在实践中，我发现它不是很准确

关于你的例子：

我试了一下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  TouchableHighlight,
  Text,
  Button,
  View
} from 'react-native';

const styles = StyleSheet.flatten({
  timeContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40
  },
  time: {
    fontSize: 50
  },
  secondary: {
    color: "#757575",
    fontSize: 22,
    alignItems: 'center'
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flexGrow: 1
  },
  button: {
    container: {
      width: 170,
      height: 170,
      padding: 20,
      borderRadius: 100,
      backgroundColor: 'rgb(89, 21, 226)',
      alignItems: 'center',
      justifyContent: 'center'
    },
    text: {
      fontSize: 50
    }
  }
});

export default class App extends Component {
  handleClockInOut = () => {
    console.log('clicked');
  }
  render() {
    const time = '22:00'
    const date = '02/01/2034'
    const text = 'TEST'
    return (<View style={styles.container}>
      <View style={styles.timeContainer}>
        <Text style={styles.time}>{time}</Text>
        <Text style={styles.secondary}>{date}</Text>
      </View>
      <TouchableHighlight style={styles.button.container} title={text} onPress={this.handleClockInOut}>
        <Text style={styles.button.text}>{text}</Text>
      </TouchableHighlight>
    </View>);
  }
}

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
进口{
站台
样式表，
触控高光，
文本
按钮
看法
}从“反应本机”；
const styles=StyleSheet.flatte({
时间容器：{
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
填充：40
},
时间：{
尺码：50
},
中学：{
颜色：“7575”，
尺寸：22，
对齐项目：“中心”
},
容器：{
为内容辩护：“中心”，
对齐项目：“居中”，
flexGrow:1
},
按钮：{
容器：{
宽度：170，
身高：170，
填充：20，
边界半径：100，
背景颜色：“rgb（89,21,226）”，
对齐项目：“居中”，
为内容辩护：“中心”
},
正文：{
尺码：50
}
}
});
导出默认类应用程序扩展组件{
handleClockInOut=（）=>{
console.log（'clicked'）；
}
render（）{
常数时间='22:00'
施工日期='2034年1月2日'
常量文本='TEST'
返回(
{time}
{date}
{text}
);
}
}

我没有使用您在示例中使用的按钮组件，但我猜实现将保持不变

还要确保在xcode配置中启用了Universal

---

以下是我的调查总结：

问题：
反应本地风格（又名DP）单位

不同设备之间的差异是由于每个设备具有不同的DIP（密度无关像素）分辨率造成的

见设备清单

解决方案：
我发现最能描述可用解决方案。
我使用了以下取自

viewport-units.js

用法示例：

---

希望能有所帮助！

感谢您的详细回答！您如何解释前两个屏幕截图和第三个屏幕截图之间的布局差异？样式中没有使用像素。。。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  TouchableHighlight,
  Text,
  Button,
  View
} from 'react-native';

const styles = StyleSheet.flatten({
  timeContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40
  },
  time: {
    fontSize: 50
  },
  secondary: {
    color: "#757575",
    fontSize: 22,
    alignItems: 'center'
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flexGrow: 1
  },
  button: {
    container: {
      width: 170,
      height: 170,
      padding: 20,
      borderRadius: 100,
      backgroundColor: 'rgb(89, 21, 226)',
      alignItems: 'center',
      justifyContent: 'center'
    },
    text: {
      fontSize: 50
    }
  }
});

export default class App extends Component {
  handleClockInOut = () => {
    console.log('clicked');
  }
  render() {
    const time = '22:00'
    const date = '02/01/2034'
    const text = 'TEST'
    return (<View style={styles.container}>
      <View style={styles.timeContainer}>
        <Text style={styles.time}>{time}</Text>
        <Text style={styles.secondary}>{date}</Text>
      </View>
      <TouchableHighlight style={styles.button.container} title={text} onPress={this.handleClockInOut}>
        <Text style={styles.button.text}>{text}</Text>
      </TouchableHighlight>
    </View>);
  }
}

'use strict';

var React = require('react-native')
  , Dimensions = React.Dimensions
  , {width, height} = Dimensions.get('window');

var units = {
  vw: width/100
, vh: height/100
};

units.vmin = Math.min(units.vw, units.vh);
units.vmax = Math.max(units.vw, units.vh);

module.exports = units;

import {vw, vh} from "../path/to/viewport-units";

const styles = StyleSheet.flatten({
    time: {
        fontSize: 13 * vw,
    },
    secondary: {
        color: "#757575",
        fontSize: 6 * vw,
    },
    container: {
        flexGrow: 1,
        marginTop: 5 * vh,
        marginLeft: 10 * vw,
        marginRight: 10 * vw,
        alignItems: 'center',
    },
    button: {
        container: {
            width: 38 * vw,
            height: 38 * vw,
            borderRadius: 19 * vw,
            marginTop: 5 * vh,
        },
        text: {
            fontSize: 11 * vw,
        }
    }
});