React Native从入门到深入三、组件View的介绍

一:React 中view 的介绍

    他是所有UI中的基础的组件,是其他组件的父组件,View是一个支持Flexbox布局、样式、一些触摸处理、容器,他可以被包含和包含在其他容器中,其作用等同于iOS中的UIView, Android中的android.view,或是网页中的<div>标签

二:View与样式的关联分为内联式和外联式。View的设计是和StyleSheet搭配使用,这样可以使代码更清晰并和获得更高的性能:

三:view的基本属性介绍

Flexbox 弹性布局

Transforms  动画属性

backfaceVisibility enum('visible', 'hidden')    定义界面翻转的时候是否可见

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轴,可产生立体效果。

四:组件的基本使用


   在图中的render函数中,我们返回了一个顶层的View,然后View中包含着另一个子层的View。

在顶层的View中的style属性里面设置了其占满父控件,内边距为20,背景颜色为黄色 ;对应子层中的View的style属性中设置了宽度100,高度10,背景色为蓝色。

五:在react开发中,推荐组件和StyleSheet配合使用,这样结构上会更加的清晰、也有利于后期维护并且能够获得更高的性能。


   在实际的项目可以灵活的配套使用

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

相关阅读更多精彩内容

友情链接更多精彩内容