Question

我正在使用使用fontSize，width＆amp; amp;的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

很少有事情可以帮到你：

对于文本：要获得完全相同的fontsize ..请确保您在平台中使用的字体相同。我们在android和ios中看到了不同的字体大小，但最终发现默认字体本身不同......因此它们看起来不同。
观看次数：对于视图和布局，请确保始终使用flex.And和flex，您可以获得所有内容，就像您对响应式Web应用程序所做的那样。以像素为单位指定任何内容都会给你带来奇怪的结果。这是因为不同的屏幕将具有不同的DPI。因此，每英寸的像素数将变化。虽然本地反应尝试了很多，以帮助你无单位维度..但在实践中，我发现它不是很准确。

关于你的例子：

我试了一下：

/**
 * 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

Answer 2

以下是我的调查摘要：

<强>问题：
React Native style uses DIP（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 - 与IPad的IOS字体大小/维度问题

2 个答案: