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

Question

我正在使用字体大小、宽度和高度的 React Native StyleSheet 机制实现非常简单的布局。

期望：布局在不同的屏幕尺寸和分辨率下应该看起来相同。

实际：iPad 看起来完全不同 - 对象不在屏幕范围内。

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

Android - Huewai (5.5") - 好

Android - nexus 7 - 足够好

IOS - Iphone 7 - 好

iPad - 糟糕！
[对象不在屏幕上 - 稍后会上传]

代码：

const styles = StyleSheet.flatten({
    timeContainer: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    time: {
        marginTop: 50,
        fontSize: 50,
    },
    secondary: {
        color: "#757575",
        fontSize: 22,
        alignItems: 'center'
    },
    buttonContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        container: {
            width: 170,
            height: 170,
            borderRadius: 100,
            marginTop:30,
        },
        text: {
            fontSize: 50,
        }
    }
});

class MyScreen extends Component {
render() {
        ...

        return (
            <View>
                <AppBar/>
                <View style={styles.container}>
                    <View style={styles.timeContainer}>
                        <Text style={styles.time}>{time}</Text>
                        <Text style={styles.secondary}>{date}</Text>
                    </View>
                    <View style={styles.buttonContainer}>
                        <Button key={1} raised primary={primary} accent={accent} style={styles.button} text={text} onPress={this.handleClockInOut} />

                    </View>
                    {/*<Text>Location</Text>*/}
                </View>
                <ModalRoot />
            </View>
        );
    }
}

Answer 1

以下是我的调查总结：

问题：
React Native 风格 uses DIP (AKA DP) 单元。

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

查看设备列表 DIP here。

解决方案：
我发现this article from Soluto 最好地描述了可用的解决方案。
我使用了取自react-native-viewport-units的以下代码

viewport-units.js

'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,
        }
    }
});

希望有所帮助！

Answer 2

几件事可以帮助你：

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

2. 视图：对于视图和布局，请确保您始终使用 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>);
  }
}

我没有使用您在示例中使用的 Button 组件 .. 但我想实现将保持不变。

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