React-Native 基础（五） Height and Width

来源：互联网发布：南方大数据300a怎么样编辑：程序博客网时间：2024/05/29 17:30

参考文档：http://facebook.github.io/react-native/docs/height-and-width.html

1. Fixed Dimension 静态尺寸
React-Native所有尺寸都是无单位，密度无关像素

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);

2. Flex Dimension 动态尺寸

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);

flex类似于Android的weight，不作过多解释

0 0