React-Native 基础（五） Height and Width

最新推荐文章于 2024-05-17 09:14:30 发布

梦想拒绝零风险

最新推荐文章于 2024-05-17 09:14:30 发布

阅读量940

点赞数

分类专栏： RN基础文章标签： RN

本文链接：https://blog.csdn.net/KevinsCSDN/article/details/52063653

版权

RN基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考文档：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);