web-dev-qa-db-ja.com

React Nativeでvwおよびvh cssを使用する方法

ロゴと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の測定に関係しています。

cssreactjsreact-native
5
Dustin Spengler

反応ネイティブがビューポートユニットをサポートしているかどうかはわかりません。しかし、モジュールがあります：

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
Bhojendra Rauniyar

ビューポート単位：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
Anuchit Boonsom