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

Question

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

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

实际：IPad 看起来很不一样 - 对象在屏幕之外。

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

Android - 虎外 (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

有几件事可以帮助您：

对于文本：要获得完全相同的字体大小..确保您在两个平台上使用的字体相同。我们在 android 和 ios 中看到了不同的字体大小，但最终发现默认字体本身是不同的..因此它们看起来不同。
Views ：对于视图和布局，请确保始终将 flex.And 与 flex 一起使用，您可以获得一切，就像响应响应一样网络应用程序。以像素为单位指定任何内容都会给您带来奇怪的结果。这是因为不同的屏幕会有不同的 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 配置中启用了通用

Answer 2

以下是我的调查总结：

问题：
React Native 风格 (AKA DP) 单位。

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

查看设备 DIP 列表 here。

解法：
我发现 this article from Soluto 描述了可用的最佳解决方案。
我使用了取自 react-native-viewport-units

的以下代码

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

希望有所帮助！

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

React Native - IOS font Size / Dimension issue with IPad

react-native

react-native-ios