react-native之高度和宽度问题

最新推荐文章于 2024-07-26 11:04:57 发布

別說你還沒有盡力

最新推荐文章于 2024-07-26 11:04:57 发布

阅读量8.7k

点赞数 1

分类专栏： react-native

本文链接：https://blog.csdn.net/u013147860/article/details/65938683

版权

react-native 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

第一个demo:

效果图：

index.android.js:

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View} from 'react-native';
class FixedDimensionsBasics extends Component{
    render(){
        return(
            <View>
                <View style={{width:50,height: 50,backgroundColor: 'powderblue'}}></View>
                <View style={{width: 100,height: 100,backgroundColor: 'skyblue'}}></View>
                <View style={{width: 150,height: 150,backgroundColor: 'steelblue'}}></View>

            </View>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => FixedDimensionsBasics);

第二个demo:

效果图：

index.android.js:

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View} from 'react-native';
class FixedDimensionsBasics extends Component{
    render(){
        return(
            <View style={{flex:1}}>
                <View style={{flex: 1,backgroundColor: 'powderblue'}}></View>
                <View style={{flex: 2,backgroundColor: 'skyblue'}}></View>
                <View style={{flex:3,backgroundColor: 'steelblue'}}></View>

            </View>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => FixedDimensionsBasics);

ps:flex在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大