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属性方法介绍如下：

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

• 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标签，简要介绍一下：

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

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