React Native核心组件View的介绍

View是React Native的基础构建元素，是该平台的抽象层，类似于IOS里面的UIView、Android里面的android.View、web里面的div。

View是用来修饰和布局它的子元素的。下面举例说明：

import React, { Component } from 'react' 
  import { AppRegistry, View, StyleSheet } from 'react-native' 
  class App extends Component {
    render() { 
      return ( 
        <View style={styles.container}>   //外层View
          <View style={styles.box} /> //内层View
        </View>          
        )
    } 
  } 
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center', 
        alignItems: 'center'
      },
      box: { 
        width: 200, 
        height: 200, 
        backgroundColor: 'skyblue', 
        borderWidth: 2, 
        borderColor: 'steelblue', 
        borderRadius: 20, 
      }   
    }
  ) 
  AppRegistry.registerComponent('App', () => App)      

常用布局样式：

熟悉 类型  

flex number 伸缩、流式布局，该元素填充的比例；类似于android布局的weight属性。0表示不填充

flexDirection string 布局方向，可选值column、row，column表示垂直方向布局，row表示水平方向布局；类似于android布局的orientation

justifyContent string 主轴上的排列方式，可选值flex-start, center, flex-end, space-around, space-between

alignItems string 副轴上的排列方式，可选值flex-start, center, flex-end, stretch

width number 宽度

height number 高度

margin number 外边距

padding number 内边距

附：伸缩或者说流式布局里面，存在primary axis(主轴)和second axis(副轴)的概念，这两个轴是相互垂直的。flexDirection指定的是主轴的方向，又因为主抽和副轴相互垂直的，主抽确定下来了，副轴自然也就确定下来了。

常用的可见样式

熟悉 类型

backgroundColor string 背景颜色

borderWidth number 边框大小

borderColor string 边框颜色

borderRadius number 圆角大小

opacity number 透明度