react-native--05界面布局

在html中所有的布局都依赖于css样式中的style继承(css中确切来说应该是不存在继承关系的，而是通过样式名称直接引用)，css拥有非常丰富的特性。
在react native中，样式的配饰和html有非常多的相似，比如说在html中声明背景颜色采用 background 或者 background-color，但是在react native中采用 backgroundColor, 所有的样式声明都是采用这种峰驼式风格。

View(视图)

react native中的View组件类似与html中的div，下面是一些针对View布局的一些测试代码。一个组件类中只能存在一个一级View。
正确的代码

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            hello world!
        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

错误的代码

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            hello world!
            hello world!
        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

multiView(多个视图)

一个组件类中只能存在一个一级View，因此多个View只能包裹在一级View中。

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            
                hello world!
                hello world!
                hello world!
            

        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);   

View Layout(视图布局)

布局涉及到的就是 宽、高、多个同级元素保持同一行(inline)、自适应宽、内间距、外间距、横向居中、竖向居中、向左居中、向右剧中、固定位置、，另外react native还提供了一种==自适应高==。
所有布局的详细参数，请参考react native官网提供的说明文档。

1. 宽和高 引用官方源码

   import React, { Component } from 'react';
   import { AppRegistry, View } from 'react-native';
   
   class FixedDimensionsBasics extends Component {
       render() {
           return (
               
                   
                   
                   
               
           );
       }
   };
   
   AppRegistry.registerComponent('rn_practice', () => FixedDimensionsBasics);
   

   

   宽和高

2. 多个同级元素保持同一行(inline) 引用官网源码

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class FlexDirectionBasics extends Component {
        render() {
            return (
                
                    
                    
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => FlexDirectionBasics);  
   

   

   多个同级元素保持同一行(inline)

3. 自适应宽 引用官网源码

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class FlexDimensionsBasics extends Component {
        render() {
            return (
                
                    
                    
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);   
   

   

   自适应宽

4. 自适应高 引用官网源码

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class FlexDimensionsBasics extends Component {
        render() {
            return (
                
                    
                    
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);   
   

   

   自适应高

5. 内间距(padding)

    import React, { Component } from 'react';
    import { AppRegistry, View, Text } from 'react-native';
    
    class FlexDimensionsBasics extends Component {
        render() {
            return (
                
                    Hello World!
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);   
   

   

   内间距(padding)

6. 外间距(margin)

    import React, { Component } from 'react';
    import { AppRegistry, View, Text } from 'react-native';
    
    class FlexDimensionsBasics extends Component {
        render() {
            return (
                
                    
                        Box 1
                        
                            Box 2
                        
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);      
   

   

   外间距(margin)

7. 对齐(align)

   采用html的方式来实现向右对齐

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class JustifyContentBasics extends Component {
        render() {
            return (
                
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);   
   

   采用flexDirection实现
   row-reverse其实并非一种常规的向右对齐，而是反向对齐。

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class JustifyContentBasics extends Component {
        render() {
            return (
                
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);   
   

   采用flexDirection+justifyContent

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class JustifyContentBasics extends Component {
        render() {
            return (
                
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);   
   

   

   向右对齐

   上述三种都是向右对齐的例子，更多、更灵活的方法，请参考mozilla公司定义的flex-Direction、justify-Content标准。

   

   mozilla justifyContent

8. 固定位置

    import React, { Component } from 'react';
    import { AppRegistry, View } from 'react-native';
    
    class JustifyContentBasics extends Component {
        render() {
            return (
                
                    
                
            );
        }
    };
    
    AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);   
   

   

   固定位置

9. 文本竖向居中

    import React, { Component } from 'react';
    import {View, AppRegistry, Text} from 'react-native';
    
    class Bananaes extends Component {
        render() {
            return (
                
                    
                        Hello
                    
                
            )
        }
    }
    
    AppRegistry.registerComponent('rn_practice', () => Bananaes);   
   

   文本竖向居中

10. 文本横向居中

    import React, { Component } from 'react';
    import {View, AppRegistry, Text} from 'react-native';
    
    class Bananaes extends Component {
        render() {
            return (
                
                    
                        Hello
                    
                
            )
        }
    }
    
    AppRegistry.registerComponent('rn_practice', () => Bananaes);
    

    文本横向居中

11. 文本横向竖向居中

    import React, { Component } from 'react';
    import {View, AppRegistry, Text} from 'react-native';
    
    class Bananaes extends Component {
        render() {
            return (
                
                    
                        Hello
                    
                
            )
        }
    }
    
    AppRegistry.registerComponent('rn_practice', () => Bananaes);
    

    文本横向居中