美文网首页
React Native从入门到深入三、组件View的介绍

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

作者: Skys | 来源:发表于2016-09-02 18:00 被阅读35次

    一: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配合使用,这样结构上会更加的清晰、也有利于后期维护并且能够获得更高的性能。

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

    相关文章

      网友评论

          本文标题:React Native从入门到深入三、组件View的介绍

          本文链接:https://www.haomeiwen.com/subject/ewqkettx.html