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

26 浏览
0 Comments

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

我正在使用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 (
            
                
                    
                
                
                     
                
            
        );
    }
}
// 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的度量单位。这在Web上可以工作，但在iOS和Android上却不能。

有人有好的建议来处理vw和vh的度量单位吗？

顺便说一下：React似乎接受百分比作为单位，可以参考这里，但我的问题特指vw和vh的度量单位。

0

3 答案

0 Comments

问题的原因是React Native默认不支持vw和vh单位，需要通过第三方库react-native-expo-viewport-units来实现。解决方法是使用该库提供的vw和vh函数来设置组件的宽度和高度。

首先，需要安装react-native-expo-viewport-units库。可以通过npm或yarn来安装，命令如下：

npm install react-native-expo-viewport-units

或

yarn add react-native-expo-viewport-units

安装完成后，在代码中引入vw和vh函数。可以使用import语句来引入，代码如下：

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

然后，在需要使用vw和vh的地方，可以通过vw和vh函数来设置组件的宽度和高度。例如，可以将vw(100)作为宽度，vh(100)作为高度，代码如下：

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

通过以上步骤，就可以在React Native中使用vw和vh单位了。

0
0 Comments

在React Native中使用vw和vh单位的方法

在React Native中，我们不确定是否支持视口单位（vw和vh）。但是，有一个模块可以帮助我们实现这个功能。

首先，我们需要安装一个名为"react-native-viewport-units"的模块。可以通过以下命令进行安装：

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

安装完成后，我们可以在代码中使用以下语法来引入vw和vh：

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

注意，我们需要使用乘法操作符来结合vw和vh进行使用，例如：

<View style={{height:50*vh, width:50*vw}}/>

我们还可以在StyleSheet中使用vw和vh。例如：

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

然而，有些用户反馈在他们的设备上无法正常工作。

0
0 Comments

在React Native中，我们可以使用Dimensions来代替vw和vh。以下是使用react-native Dimensions的示例：

import { Dimensions } from 'react-native'
const halfWindowsWidth = Dimensions.get('window').width / 2

这应该是被接受的答案！与其添加额外的依赖项，不如使用react-native首选的useWindowDimensions API更加安全和简单。它会传播更新并且与自v0.12.0以来与react-native-web无缝协作。

太合理了！这是一个很好的方法。

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

您能否明确一下如果用户更改窗口大小或设备方向会发生什么情况？

0