React Native基础组件

转载请注明出处：小楼一夜听春雨的专栏http://blog.csdn.net/win816723459/article/details/54134171

本节主要介绍以下组件

• View 容器组件（同Html中的div标签）
• Text 文本组件（同Html中的p标签）
• Image 图片组件
• TextInput 输入组件
• ScrollView 滑动容器组件（同原生组件ScrollView滑动方向水平和垂直）

1.View 容器组件

• 定义

  <View>React Native组件，相当于html中的<div>标签，具有相同的特性，支持嵌套。<View>组件可以把固定的区间分割成独立的、不同的部分。用于严格的模块化布局组织工具，默认内部child垂直排列,可调整排列方向，这点与Android原生组件LinearLayout很像。

• 主要属性 （详细请参考View）

  • pointerEvents enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’)

  用于控制当前视图是否可以作为触控事件的目标。
  * auto: 视图可以作为触控事件的目标
  * none: 视图不能作为触控事件的目标
  * box-none: 视图自身不能作为触控事件的目标，但其子视图可以。
  * box-only：视图自身可以作为触控事件的目标，但其子视图不能。

  • 样式

  Flexbox
  
  backfaceVisibility enum('visible', 'hidden')
  
  backgroundColor string
  
  borderColor string
  
  borderTopColor string
  
  borderRightColor string
  
  borderBottomColor string
  
  borderLeftColor string
  
  borderRadius number
  
  borderTopLeftRadius number
  
  borderTopRightRadius number
  
  borderBottomLeftRadius number
  
  borderBottomRightRadius number
  
  borderStyle enum('solid', 'dotted', 'dashed')
  
  borderWidth number
  
  borderTopWidth number
  
  borderRightWidth number
  
  borderBottomWidth number
  
  borderLeftWidth number
  
  opacity number
  
  overflow enum('visible', 'hidden')
  
  android elevation number
  (限Android)使用Android原生的 elevation API来设置视图的高度（elevation）。这样可以为视图添加一个投影，并且会影响视图层叠的顺序。此属性仅支持Android5.0及以上版本。

• 用法

  View用法与LinearLayout一致，唯一的区别在于自身可定制的属性不同,下面结合代码介绍，见注释：

/**
 * Created by liyanxi on 2016/11/28.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class WelcomDemo <