React Native之布局

上一期讲到了一个简单的显示一行HelloWorld文字的小程序，比较遗憾的是没有讲到怎样布局，造成显示位置不是很理想，这一期我们就看一下怎样优雅的布局
1、首先看一小段程序

import React, { 
    Component 
} from 'react';
import {  
    AppRegistry,  
    StyleSheet,  
    Text,  
    View
} from 'react-native';
class HelloWorld extends Component {  
    render() {    
        return (      
                    
                          
                   Welcome to React Native!        
                        
                          
                   To get started, edit index.ios.js        
                   
               
         );  
      }
}
const styles = StyleSheet.create({  
    container: {    
        flex: 1,    
        justifyContent: 'center',    
        alignItems: 'center',    
        backgroundColor: '#F5FCFF'
    },  
    welcome: {    
        fontSize: 20,    
        textAlign: 'center'    
        margin: 10
    },  
    instructions: {    
        textAlign: 'center',    
        color: '#333333',    
        marginBottom: 5
    }
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

这个多代码其实就是在屏幕的正中间显示两行文字，仔细和上一期的程序比对一下，你会发现多了样式代码，这些代码就是布局代码。

2、Flex弹性布局
//待完成