React Native控件之View视图解析

React Native控件之View视图解析

（一）前言

这篇文章我们来讲解一下View控件，今天的内容是非常基础，但是是非常有用的东西。特别注意View控件的属性和方法，要记住一些非常常用的属性与方法。

（二）View介绍

View作为创建UI时候最基础最常用的组件，在react-native中View组件是支持FlexBox布局（FlexBox布局的详细使用讲解）、CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边，并且可以包含多种类型的子视图。在Web、Android、iOS三种平台上面，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