React Native 之 width与height
来源:互联网 发布:工业大数据 难点 编辑:程序博客网 时间:2024/06/03 13:51
组件的高度和宽度确定它在屏幕上的大小。
Fixed Dimensions
最简单的方法来设置组件的尺寸是通过添加一个固定的宽度和高度的风格。所有维度在RN没有单位,代表密度独立像素。
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 style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); }};AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
通常是这样设置组件维度,无论屏幕尺寸,组件应该呈现在完全相同的大小。
Flex Dimensions
在组件的样式中,使用flex的组件可以根据可用空间动态扩展和收缩。通常您将使用flex:1,它告诉一个组件来填补所有可用空间,同一个父组件下、多个组件共享均匀空间。flex越大,比值越高占用空间越多,兄弟组件空间越少。
组件只能扩大到填满可用空间,如果父组件尺寸大于0。如果父组件没有固定的宽度和高度或flex,父组件维度为0、flex的子控件将不可见。
import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';class FlexDimensionsBasics extends Component { render() { return ( // Try removing the `flex: 1` on the parent View. // The parent will not have dimensions, so the children can't expand. // What if you add `height: 300` instead of `flex: 1`? <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View> ); }};AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
你可以控制组件的大小后,下一步是学习如何展示在屏幕上
关注公众号:
更多精彩文章等你来!!!
[1]:参考文献 http://facebook.github.io/react-native/docs/height-and-width.html
0 0
- React Native 之 width与height
- 基础篇章:React Native之Flexbox的讲解(Height and Width)
- React-Native 基础(五) Height and Width
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- HTML5 Canvas 的width/height 与style.width/height
- React-Native 之 redux 与 react-redux
- React-Native 之 redux 与 react-redux
- width height
- Canvas设置width与height 的问题!
- React Native之ViewPagerAndroid讲解与应用
- React Native之PanResponder讲解与应用
- React Native之FlexBox介绍与使用
- React Native 之 Touchable 介绍与使用
- React Native 之 Natigator与NatigatorIOS使用
- React Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- 基于RTP协议的H.264视频传输系统:原理
- SQLite使用drop column删除表字段
- proxy服务相关资料整理
- Android 属性动画解析
- C++ Web实时消息后台服务器推送技术---GoEasy
- React Native 之 width与height
- 从oppo vivo手机开始散谈
- 模拟IC强强整合,ADI 以148亿美元收购Linear
- 仿QQ空间的一款APP(一)
- 面向对象设计模式Solid设计原则
- 16 down vote favorite 2 Here's a preview of the status running supervisorctl status every 2 seconds
- 每天工作4小时的程序员
- opencv 存储图像 & 递归搜索路径
- 检测键盘的出现跟消失