React Native 的高度与宽度设置

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>
    );
  }
};
 // 注册应用(registerComponent)后才能正确渲染
 // 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
 AppRegistry.registerComponent( 'AwesomeProject', () =>  FixedDimensionsBasics);                                  

2、弹性（Flex）宽高

  import  React, {  Component } from  'react';
 import {  AppRegistry,  View } from  'react-native';

  class  FlexDimensionsBasics  extends  Component {
  render() {
     return (
       // 试试去掉父View中的`flex: 1`。
       // 则父View不再具有尺寸，因此子组件也无法再撑开。
       // 然后再用`height: 300`来代替父View的`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);                                 

查看更多关于React Native 的高度与宽度设置的详细内容...