React Native 界面布局

View布局

水平垂直居中

    render(){
           return (
            
                             
            
            );
      }

左右固定，中间flex

    render(){
           return (
            
                
                    fixed
                
                
                    flex
                
                
                    fixed
                
            
            );
      }


const styles = StyleSheet.create({
  flexContainer:{
    flexDirection:'row'
  } ,
  welcome:{
    fontSize:20,
    textAlign:'center',
    margin:10
  },
  cellfixed:{
    height:50,
    width:80,
    backgroundColor:'#fefefe'
  }
});

绝对定位和相对定位

    render(){
           return (
            
            
                
            
            );
      }

const styles = StyleSheet.create({
  circle1:{
    backgroundColor:'green',
    borderRadius:10,
    width:20,
    height:20
  },
    circle2:{
    backgroundColor:'#fe0000',
    borderRadius:10,
    width:20,
    height:20
  }
});

定位.png

绿色的原点距离左边50，红色距离左边50+marginLeft偏移50，即100，

图片布局

1.cover

    render(){
           return (
            
                
            
            );
      }

cover效果.png

2.stretch

    render(){
           return (
            
                
            
            );
      }

stretch效果.png

3.contain

    render(){
           return (
            
                
            
            );
      }

contain效果.png