React Native - Height&Width

React Native - Height&Width 首页 / React Native入门教程 / React Native - Height&Width

Width和Height确定屏幕上组件的大小。设置组件的高度和宽度的方法有两种:Fixed尺寸和Flex尺寸。

Flxed尺寸

在样式中使用固定高度和固定宽度是设置组件尺寸的最简单方法。 React Native组件的尺寸是无单位的,它们代表与密度无关的像素。

不管屏幕尺寸如何,通常都将组件的尺寸设置为固定大小,并且尺寸完全相同。

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-height-and-width.html

来源:LearnFk无涯教程网

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class HeightWidth extends Component {
    render() {
        return (
            <View>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    powderblue:{
        width: 100, height: 100, backgroundColor: 'powderblue'
    },
    skyblue:{
        width: 200, height: 200, backgroundColor: 'skyblue'
    },
    steelblue:{
        height: 300, backgroundColor: 'steelblue'
    },
})

输出

React Native Height and Width

Flex尺寸

flex属性为组件设置样式,以根据可用空间动态地对其进行扩展和收缩。设置flex:1将填充组件的所有可用空间,并在与父组件相同的其他组件之间平均共享。

 import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

export default class HeightWidth extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
      flex:1
    },
    powderblue:{
        flex:1,
        backgroundColor: 'powderblue',
    },
    skyblue:{
        flex:2,
        backgroundColor: 'skyblue',
    },
    steelblue:{
        flex:3,
        backgroundColor: 'steelblue',
    },
})

输出

React Native Height and Width

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Nginx核心知识150讲 -〔陶辉〕

Python核心技术与实战 -〔景霄〕

小马哥讲Spring核心编程思想 -〔小马哥〕

架构实战案例解析 -〔王庆友〕

检索技术核心20讲 -〔陈东〕

编译原理实战课 -〔宫文学〕

技术面试官识人手册 -〔熊燚(四火)〕

郭东白的架构课 -〔郭东白〕

计算机基础实战课 -〔彭东〕

好记忆不如烂笔头。留下您的足迹吧 :)