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 透明度