React-Native 基础(五) Height and Width

前端之家收集整理的这篇文章主要介绍了React-Native 基础(五) Height and Width前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  1. import React,{ Component } from 'react';
  2. import { AppRegistry,View } from 'react-native';
  3.  
  4. class FixedDimensionsBasics extends Component {
  5. render() {
  6. return (
  7. <View>
  8. <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} />
  9. <View style={{width: 100,height: 100,backgroundColor: 'skyblue'}} />
  10. <View style={{width: 150,height: 150,backgroundColor: 'steelblue'}} />
  11. </View>
  12. );
  13. }
  14. };
  15.  
  16. AppRegistry.registerComponent('AwesomeProject',() => FixedDimensionsBasics);

2. Flex Dimension 动态尺寸

  1. import React,View } from 'react-native';
  2.  
  3. class FlexDimensionsBasics extends Component {
  4. render() {
  5. return (
  6. // Try removing the `flex: 1` on the parent View.
  7. // The parent will not have dimensions,so the children can't expand.
  8. // What if you add `height: 300` instead of `flex: 1`?
  9. <View style={{flex: 1}}>
  10. <View style={{flex: 1,backgroundColor: 'powderblue'}} />
  11. <View style={{flex: 2,backgroundColor: 'skyblue'}} />
  12. <View style={{flex: 3,() => FlexDimensionsBasics);

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

猜你在找的React相关文章