React Native常用组件之View
React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签，它是所有组件的父组件。
View的基本运用：
采用StyleSheet来进行组件的布局
React Native的FlexBox布局
弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flexbox的常用属性
- 容器属性
- flexDirection: `row | row-reverse | column | column-reverse`
该属性决定主轴的方向（即项目的排列方向）。
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
- justifyContent:`flex-start | flex-end | center | space-between | space-around`
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
c） alignItems: `flex-start | flex-end | center | baseline | stretch`
定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐 。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
d) flexWrap: `nowrap | wrap | wrap-reverse`
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- 元素属性
a）flex
“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写， 其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。
b）alignSelf: “auto | flex-start | flex-end | center | baseline | stretch”
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- 获取当前屏幕的宽度、高度、分辨率
React Native常用组件之Image
- Image组件的基本用法
- 从当前项目中加载图片
- 加载使用APP中的图片
- 加载来自网络的图片
- 设置图片为背景
- Image组件的常见属性
onLayout(function)
当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.
onLoad (function)
当图片加载成功之后，回调该方法
onLoadEnd (function)
当图片加载失败回调该方法，该不会管图片加载成功还是失败
onLoadStart (fcuntion)
当图片开始加载的时候调用该方法
resizeMode
缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
source{uri:string}
进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径
React Native常用组件之TextInput
TextInput的常见属性
value 字符串型
文本输入的默认值
onChangeText 函数
监听用户输入的值
keyboardType 键盘类型
enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")
multiline 布尔型
如果值为真，文本输入可以输入多行。默认值为假。
password 布尔型
如果值为真，文本输入框就成为一个密码区域。默认值为假。
placeholder 字符串型
在文本输入之前字符串将被呈现出来，通常被称为占位文字
placeholderTextColor 字符串型
占位符字符串的文本颜色
autoCapitalize enum('none', 'sentences', 'words', 'characters')
可以通知文本输入自动利用某些字符。
characters：所有字符，
words：每一个单词的首字母
sentences：每个句子的首字母（默认情况下）
none：不会自动使用任何东西
autoCorrect 布尔型
如果值为假，禁用自动校正。默认值为真。
autoFocus 布尔型
如果值为真，聚焦 componentDidMount 上的文本。默认值为假。
bufferDelay 数值型
这个会帮助避免由于 JS 和原生文本输入之间的竞态条件而丢失字符。默认值应该是没问题的，但是如果你每一个按键都操作的非常缓慢，那么你可能想尝试增加这个。
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')
清除按钮出现在文本视图右侧的时机
controlled 布尔型
如果你真想要它表现成一个控制组件，你可以将它的值设置为真，但是按下按键，并且/或者缓慢打字，你可能会看到它闪烁，这取决于你如何处理 onChange 事件。
editable 布尔型
如果值为假，文本是不可编辑的。默认值为真。
enablesReturnKeyAutomatically 布尔型
如果值为真，当没有文本的时候键盘是不能返回键值的，当有文本的时候会自动返回。默认值为假。
onBlur 函数
当文本输入是模糊的，调用回调函数
onChange 函数
当文本输入的文本发生变化时，调用回调函数
onEndEditing 函数
onFocus 函数
当输入的文本是聚焦状态时，调用回调函数
returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
决定返回键的样式
secureTextEntry 布尔型
如果值为真，文本输入框就会使输入的文本变得模糊，以便于像密码这样敏感的文本保持安全。默认值为假。
React Native之常用Touchable系列组件
- 高亮触摸 TouchableHighlight
常用属性：
activeOpacity number
设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)
onHideUnderlay function 方法
当底层被隐藏的时候调用
onShowUnderlay function 方法
当底层显示的时候调用
style
可以设置控件的风格演示，该风格演示可以参考View组件的style
underlayColor
当触摸或者点击控件的时候显示出的颜色
- 不透明触摸 TouchableOpacity
常用属性：
activeOpacity number
设置当用户触摸的时候，组件的透明度
