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

Question

我正在使用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 可以接受百分比，如此处所示，我可能会退回到这种方法。但我的问题特别涉及 vw 和 vh 的计量单位。

- Dustin Spengler

Answer 1

在react-native中，您可以使用Dimensions而不是viewport。以下是react-native Dimensions的链接。

https://reactnative.dev/docs/dimensions

下面是一个例子：

import { Dimensions } from 'react-native'

const halfWindowsWidth = Dimensions.get('window').width / 2

- Anupam Chaplot

---

这应该是被接受的答案！不需要添加任何额外的依赖，可以放心地使用React Native推荐的 useWindowDimensions API。它会自动传播更新并且从0.12.0版本开始能够与React Native Web无缝协同工作。 - tjeisenschenk

非常正宗！这是一个很好的方式来处理它。 - Starfs

此外，react-native-viewport-units 包在 Next JS（服务器端渲染）的导入级别上出现问题，导致无谓的延迟加载复杂化。 - KeitelDOG

你能具体说明一下如果用户改变窗口大小或设备方向会发生什么吗？ - TOPKAT

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

- Bhojendra Rauniyar

---

我的设备无法运行... - Hakimov-dev

我的设备无法运行... - undefined

Answer 3

Viewport units：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>

- Anuchit Boonsom

Answer 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>

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

- vijay krishna