ReactNative学习笔记5

原文地址,本文为原文不完全翻译

布局与可变框

一个组件可以根据可变框计算来确定它的子组件的位置,可边框的作用是用来适配不尺寸的手机屏幕局的.
你通常需要结合flexDirection, alignItems, 和 justifyContent 来实现想要的布局.

flexDirection

控制子组件排列方向,水平方向排列赋值row,竖直方向排列赋值column,默认值为column

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

class FlexDirectionBasics extends Component{
  render(){
    return(
      
        
        
        
      
    );
  }
}

AppRegistry.registerComponent('FlexDirectionBasics', ()=>FlexDirectionBasics)

Paste_Image.png

Justify Content

这个属性决定了子组件的分布方式,分布的方式有: flex-start(挤压在其实位置), center(挤压在中间), flex-end(挤压在底部), space-around(边缘分布均分), 和 space-between(均分并居中).

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

class justyContentDemo extends Component{
  render(){
      return(
        //尝试各种不同的值,加深理解(如:flex-start, center, flex-end)
        
            
            
            
        
      );
  }
}

AppRegistry.registerComponent('justyContentDemo', ()=>justyContentDemo);

Paste_Image.png

Align Items

style中添加alignItems属性可以影响子控件在父控件中的相对位置(是flex-start(顶部), center(居中), flex-end(底部), 还是拉伸填充(stretch)),假如子组件是水平排列就是影响竖直方向的相对位置,假如子组件是竖直排列影响的就是水平方向的相对位置,另外alignItems的优先级是低于宽高的,假如发生冲突的话,宽高设置才是有效的,比如下面的例子中,子组件水平排列,设置alignItems : 'stretch' , 但是因为蓝色与绿色的组件设置了height:50,所以无效,只有红色的组件有效发生了拉伸填充

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

class AlignItemsBasics extends Component {
  render(){
    return(
      
        
        
        
      
    )
  }
}

AppRegistry.registerComponent('AlignItemsBasics', ()=>AlignItemsBasics);

Paste_Image.png