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

Question

我正在使用带有 Logo 和 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 测量。

Answer 1

您可以在 react-native 中使用 Dimensions 而不是 veiwport。 PFB react-native Dimensions 的链接。

https://reactnative.dev/docs/dimensions

这是一个例子:

import { Dimensions } from 'react-native'

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