React Native 之 width与height

---

组件的高度和宽度确定它在屏幕上的大小。

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