如何在 React Native 中使用 vw 和 vh css答案

【问题标题】：How to use vw and vh css with React Native如何在 React Native 中使用 vw 和 vh css
【发布时间】：2019-02-26 05:34:45
【问题描述】：

我正在使用带有徽标和 2 个输入的 React Native 创建基本登录：

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';

// create a component
class Login extends Component {
    render() {
        const imageURL = require('./images/CircleLogo.png');
        return (
            <View style={styles.container}>
                <View style={styles.loginContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={imageURL} />
                </View>
                <View style={styles.formContainer}>
                    <LoginForm /> 
                </View>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'aliceblue',
    },
    loginContainer:{
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'center'
    },
    logo: {
        position: 'absolute',
        width: '70vw',
        height: '70vw',
        maxWidth: 300
    }
});

//make this component available to the app
export default Login;

如您所见，我正在使用 vw 和 vh css 测量值。

这适用于网络，但不适用于 iOS 或 Android。

有没有人对处理vw 和vh 测量有好的建议？

旁注：react 似乎接受了here 所见的百分比，我可能会恢复。但我的问题具体与vw 和vh 测量有关。

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

您可以在 react-native 中使用Dimensions 来代替veiwport。 PFB 是 react-native Dimensions 的链接。

https://reactnative.dev/docs/dimensions

【讨论】：

这应该是公认的答案！无需添加额外的依赖项，而是保存且易于依赖 react-natives 首选 useWindowDimensions API。自 v0.12.0 起，它将传播更新并与 react-native-web 无缝协作。
超级合法！这是一个很好的方法。

【解决方案2】：

我不知道 react-native 是否支持视口单元。但是，有一个模块：

https://www.npmjs.com/package/react-native-viewport-units

安装

npm install react-native-viewport-units --save

用法

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

注意所需的运算符/语法：x * vw

<View style={{height:50*vh, width:50*vw}}/>
var styles = StyleSheet.create({
  lookingGood: {
    width: 15*vmin,
    height: 10*vmax,
    padding: 2*vw,
    margin: 4*vh,
  }
});

【讨论】：

【解决方案3】：

视口单位：vw、vh、vmin、vmax - React Native。

https://github.com/joetakara/react-native-expo-viewport-units

安装

npm install react-native-expo-viewport-units

或

yarn add react-native-expo-viewport-units

用法

import { vw, vh, vmin, vmax } from 'react-native-expo-viewport-units';

<View style={{ width: vw(100), height: vh(100) }}>
  ...
<View>

【讨论】：

【解决方案4】：

我浏览了其他答案，所有这些对于新项目都有效且简单。如果您希望使现有项目具有响应性，我建议您使用以下包。

https://www.npmjs.com/package/react-native-responsive-view-port

假设您已经为 1280 x 800 构建了一个应用程序，并且您希望它能够响应所有分辨率，那么您可以如下所示实现它。

之前

    <View style={{ width:500 }} ></View>

之后

const { vw, vh } = createViewPortConfig({ width : 1280, height : 800 });

<View style={{ width: 500*vw }} ></View>

我发现这种方法比重新计算所有尺寸更容易。

【讨论】：