React Native 之组件门派大师兄View

通过上次对Flexbox布局的学习，相信大家对React Native的布局已经熟悉了，下面我们就开始一个组件一个组件的学习，第一个就是组件中的老大View，

React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的div标签，它是所有组件的父组件其属性有如下：

backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 设置透明度，取值从0-1；
overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏；
elevation number 高度 设置Z轴，可产生立体效果。
shadow
shadowColor color 设置阴影色ios
shadowOffset {width: number, height: number} 设置阴影偏ios
shadowOpacity number 设置阴影不透明度 (乘以颜色的alpha分量)ios
shadowRadius number 设置阴影模糊半径ios

在React Native开发中，我们通常采用StyleSheet来进行组件的布局，如下

export default class ReactDemo extends Component {
render() {
return (



);
}
}

const styles = StyleSheet.create({
outerViewStyle: {
flex:1,
padding:30,
backgroundColor:'red'
},

innerViewStyle: {
width:200,
height:100,
backgroundColor:'yellow'
}
});

添加边框线

屏幕快照.png