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 (
<View style={styles.outerViewStyle}>
<View style={styles.innerViewStyle}></View>
</View>
);
}
}

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

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

添加边框线


屏幕快照.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,839评论 25 709
  • 感情有时候只是一个人的事情。和任何人无关。爱,或者不爱,只能自行了断。伤口是别人给予的耻辱,自己坚持的幻觉。 ——...
    豫悦和谦阅读 1,131评论 0 0
  • 很多时候 总在原谅和错误中度过 就像一个首尾相连的蛇 终点和起点已经分不清 就像西西弗斯 一生都在伴随 永远过不去...
    布老头和他的家人们阅读 1,755评论 2 0
  • 一切都是最好的安排,感恩生命中遭遇的一切。
    Marktuanx2阅读 818评论 0 0