最近在学习react-native和QT

React-Native View控件解析

reactnative jackton 916℃ 0评论

View介绍

View作为创建UI时候最基础最常用的组件,在React-native中View组件是支持FlexBox布局(FlexBox布局的详细使用讲解)、CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边,并且可以包含多种类型的子视图。在Web、AndroidiOS三种平台上面,View视图分别对应三种平台原生视图,在iOS中对应UIView,在Web中对应< div >标签,Android对应android.view,下面举出一个简单的例子:
这里写图片描述

上诉代码创建一个高度为100的View组件,padding为20,也就是说填充物为20,再在这个视图里面嵌套一个红色的View视图。然后继续在红色视图中嵌套一个Text组件。

其实在写React Native项目的时候,一般在实际开发中,都会将样式写成CSS样式,这样写代码读起来比较清晰,而且便于以后项目维护,以下就是使用CSS方式重写上述代码:

'use strict'
import React, { Component } from 'react';
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View
} from 'react-native'

var PerfectProject = React.createClass({
    render: function(){
       return (
          <View style={styles.first_view}>
            <View style={styles.second_view}>
               <Text>这是一个红色View!</Text>
            </View>
          </View>
       );
    },
});

var styles = StyleSheet.create({
  first_view:{
    flexDirection:'row',
    height:100,
    padding:20
  },
  second_view: {
    backgroundColor:'red',
    flex:1
  },
});

AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

View的属性方法

View属性方法介绍如下:

序号 名称 属性或者方法 类型 说明
1 accessibilityLabel 属性 string
2 accessible 属性 bool 当为true时,表示该元素是可以进行访问,默认情况下所有可触摸的元素控件都是可以访问的
3 onAccessibilityTap 方法 function 该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势
4 onLayout 方法 function 当组件的布局发生变动的时候,会自动调用下面的方法:{nativeEvent: { layout: {x, y, width, height}}}。该事件当重新计算布局的时候回立即进行触发,不过界面可能不会立即刷新,特别当布局动画正在加载中的时候。
5 onMagicTap 方法 function 当accessible为true的时候,当用户双指点击(Magic Tap)的时候,进行触发。

其他的一些方法如下(下面很多是关于事件响应者链的,都比较简单的,就不着重讲解的,有兴趣大家都可以去测试一下):

  • onMoveShouldSetResponder
  • onMoveShouldSetResponderCapture
  • onPresponderGrant
  • onResponderMove
  • onResponderReject
  • onResponderRelease
  • onResponderTerminate
  • onResponderTerminationRequest
  • onStartShouldSetResponder
  • onStartShouldSetResponderCapture
  • pointerEvents enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’)(触摸事件是否可以进行穿透控件View);
  • removeClippedSubviews:该控件由于进行优化性能,尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多,已经超过父容器,并且子视图和父容器视图都有overflow:hidden风格样式。

【注意】关于上面一些方法的具体使用,后面在讲到事件响应者的时候会进行着重讲解。

View样式——Style便签介绍

在React Native的Style样式布局中,有许多Style标签,简要介绍一下:

Style标签 说明
FlexBox 弹性布局(详细介绍请点击
backfaceVisibility enum(‘visible’,’hidden’)定义界面翻转的时候是否可见
borderColor 边框颜色,这边几个就是代表上下左右边框的颜色(borderTopColor,borderRightColor,borderBottomColor,borderLeftColor)
borderStyle 边框线的风格,这个和CSS样式是一样的,enum(’solid’,’dotted’,’dashed’)
opacity 设置透明度
elevation 高度,设置Z轴,可以产生立体效果
transforms 动画属性(详细介绍请点击
backgroundColor 颜色
borderRadius 边框圆角大小,其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius
borderWidth 边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderLeftWidth,borderBottomWidth,borderRightWidth
overflow 设置超过容器内容显示与否

下面有几个特殊的属性,在这里介绍所有平台通用以及只能在Android平台上有效果的属性。

属性名 作用 平台
testID 可以根据该testID在测试的时候定位该View 全平台
accessibilityComponentType 定义是否该UI组件和原生组件一致化处理 android平台
accessibilityLiveRegion enum(‘none’,’polite’,’assertive’) 该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果 android平台
collapsable 布局合并优化使用 android平台
importantForAccessibility enum(‘auto’, ‘yes’, ‘no’, ‘no-hide-descendants’) 设置视图响应事件等级 android平台
needsOffscreenAlphaCompositing 设置View是否需要渲染和半透明度效果处理的先后次序。 android平台
renderToHardwareTextureAndroid 设置是否需要GPU进行渲染 android平台

可以参考官方例子UIExplorer项目,这个项目包含所有组件的例子代码:https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js

转载请注明:Coding » React-Native View控件解析

喜欢 (0)

您必须 登录 才能发表评论!