React Native控件之View视图解析_nativeview是

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 (
          
1
2
3
4
5
6
7
8
9
10
11
12
13
14