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

Posted 2023-02-22

【中文标题】如何在 React Native 中使用 vw 和 vh css

【英文标题】：How to use vw and vh css with React Native

【发布时间】：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 测量有关。

【参考方案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>

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