第5章 flexbox布局、View、Image与可触摸式组件

位置及宽、高相关样式键：

position:可以取值为relative（默认值）或者absolute，表示当前描述的位置是相对定位还是绝对定位。

当position键的值为absolute时，描述位置可以使用top、bottom、left、right四个键，表示当前组件的位置距父组件的最上（下、左、右）沿有多少pt。

当position键的值为relative时，不可以使用bottom和right键描述位置。top和left键的默认值为0。top和left键表示当前组件距上一个同级组件的最上（左）沿有多少pt。

与宽、高相关的树枝类型键有width、height、maxHeight、maxWidth、minHeight、minWidth。

在flexbox布局中，允许存在宽、高动态改变的组件，所以有些组件可以不指定宽、高和最大、最小宽高，这时这些组件的宽、高由它们内部需要显示的内容动态决定。在flexbox布局中，要尽量不指定宽高，而由组件的内容排列方式来动态决定组件的宽高。

flexDirection键：决定了内部的子组件是如何排列的，它的取值可以为row、row-reverse、column、column-reverse，默认值是column。

flexWrap键值可以取两个字符串类型值的一个：wrap或nowrap。默认值是nowrap，表示不会自动换行（或者换列）排列。

flexWrap取值为wrap 时，还需要alignItem键配合才能实现子组件自动换行排列，并且alignItem键不能取值为stretch。

justifyContent键：用来定义在一个方向上如何排列子组件。它有5种可能的字符串类型值：flex-start、flex-end、center、space-between，space-around。

alignItems键：定义了View组件中所有子组件的对齐规则。它有4种可能的字符串类型值：flex-start、flex-end、center、stretch。其中，flex-start代表顶部对齐；flex-end代表底部对齐；center代表中部对齐；stretch代表拉长对齐。

flex键：flex键的类型是数值，它默认值是0，它可以取值为-1、0或者任意正整数值。当它的值为非零时，在父组件的弹性方向（flexDirection键定义的方向），组件将自动缩放以适应父组件剩下的空白空间。如果父组件的弹性方向时列，则组件的height键即使有值也会失效。如果父组件的弹性方向行，则组件的width键即使有值也会失效。

使用flex键的组件，在自动缩放的同时不仅改变了自己的宽、高与位置，还可以改变与它同级的其他的组件的位置。

我们可以通过几个同级别组件设定不同的flex值，达到几个同级别组件按着不同比例分配父组件可用空间的效果。

当flex值为-1时，如果它的父组件的剩余空间足够放下这个组件时，那么这个组件将按着它的宽与高来显示。如果不足时，那么这个组件将会缩小至它的minHeight和minWidth来显示。

alignself键：有5中可能的字符串类型值：auto、flex-start、flex-end、center、stretch。其用途是让组件忽略它的父组件样式中的alignItems键的取值，而对该组件使用alignSelf键对应的规则。

组件的边框（border）、空隙（margin）、填充（padding），空隙时组件与组件之间的空间，填充是内容与边框之间的空间。

边框（border）：borderWidth、borderTopWidth....

填充（padding）：paddingHorizontal（水平方向两个边有效）、paddingVertical（垂直方向两个边有效）、paddingTop....

空隙（margin）：marginHorizontal（水平方向两个边有效）、marginVertical（垂直方向两个边有效）、marginTop....

zIndex：类型是数值，zIndex值大的那个组件将会覆盖另一个组件。如果两者的zIndex值相等，在JSX代码中后渲染的组件将会覆盖先渲染的组件。

组件多样式声明与动态样式声明：

组件多种样式：

style={[样式-，样式二，样式三]}

在多种样式中，如果某一个键又重复定义，那么后面的样式定义的键将覆盖前面。

组件的样式的在应用中是需要改变的：

style={[样式-，{color: this.state.color}]}//color样式键可以动态变化

   View组件：React Native最基本的组件。绝大部分其他的RN组件都继承了View组件的属性，包括支持View组件的样式设置、回调函数与其他属性。

backgroundColor 键用来指定组件的背景颜色。只有Text与TextInput组件会继承其父组件的背景颜色。

Opactity键定义了View组件的透明度，它的取值0～1。

borderStyle键用来设置边框的风格，它的取值solid、dotted、dashed，分别表示实线边框、点状边框、虚线边框。，默认值是solid。

定义边框颜色可以使用到5个字符串类型的值，它们是borderColor、borderTopColor，....。

定义圆角边框可以使用到5个字符串类型的值，它们是borderRadius，borderTopRadius.，....。

让一个组件的边框只有一个像素的宽度，设置borderWidth：1/pixleRatio 。pixelRatio是通过PixelRatio.get()得到的pt值。

View组件的阴影：shadowColor，shadowOffset，shadowOpacity，shadowRadius的样式键。

overfolow键有两个字符串类型的取值，visible和hidden。它定义了当View组件的宽高超出View组件宽高是的行为。默认是hidden，隐藏超出部分。这个键只对iOS平台有效。

View组件的变形：利用transform样式键设置实现组件的变形。

transform:
 [
    {perspective: numer},
    {rotate: string},//不指定轴旋转
    {rotateX: string},//X轴旋转
    {rotateY: string},//Y轴旋转
    {rotateZ: string},//Z轴旋转
    {scale: number},//X，Y轴放大
    {scaleX: number},X轴放大
    {scaleY: number},Y轴放大
    {translateX: number},X轴平移
    {translateY: number},Y轴平移
    {skewX: string},X轴倾斜
    {skewY: string}Y轴倾斜
 ]

View组件的回调函数：假如A组件有一个属性，名称是onB（React Native 开发中，这样命名的意思是B事件发生了），它要求开发者提供的onB的值必须是一个函数引用，当B事件发生时，React Native 框架通过onB的值回调这个函数。

onLayout是View 组件的回调函数类型的属性，当View组件被加载或者布局改变时，回调函数被调用。

onMagicTap是双指轻点屏幕两次是RN将调用这个回调函数。

View组件的其他属性，removeClippedSubviews是布尔类型的属性。它是一个特殊的与性能优化相关的属性，通常在ScrollView组件或者ListView组件使用。当组件有很多子组件不在屏幕范围显示范围内时，将这个属性设为true允许释放这些不再显示范围内的子组件以优化性能。要让此属性生效，组件与子组件的样式键overflow都应当设置为hiddne（默认值）

检测设备当前时竖直的还是横置时的一个方法是取当前屏幕的宽、高正常的设备竖置时，宽小于高；而横置时，宽大于高。

Dimensions API 是它可以取到设备屏幕的宽高，但始终是应用启动时的宽高。

在RN开发中，通过指定这个根View组件的onLayout回调函数可以方便的得到初始设备的放置状态，监测设备放置状态的改变并得到改变后的新的屏幕的宽高。为了实现这个功能， 不能设定根View的宽高，并需要shedinggenView组件的样式键flex值为1 。

绝大部分的RN组件的onLayout回调函数都可以向开发者提供该组件的宽、高与组件左上角的坐标。

需要注意的是onLayout事件（组件被加载或者组件的布局改变的事件）会在布局被RN框架计算好后马上发出，此时新的布局可能还没有被渲染到屏幕上。

在RN框架中，触摸事件总是被传送到最上层的组件。

poinerEvents属性：字符串属性，可以取值none,box-none，box-only，auto。当取值none时，发生在本组件与本组件的子组件上的触摸事件都会交给本组件的父组件处理。当取值为box-none时，发生在本组件显示范围内（但非本组件的子组件范围内）的事件将交由本组件的父组件处理，发生在本组件的子组件显示范围内的触摸事件由子组件处理。当取值为box-only时，发生在本组件显示范围内的触摸事件全部由本组件处理（即使触摸事件发生在本组件的子组件显示范围内）。而auto的行为是组件的不同而不同。并不是所有的子组件都支持box-only和box-none两个值。

Image组件，RN可以从给定的网址、给定的本地文件或者项目的资源文件中加载图片。

RN默认支持JPG与PNG格式。RNG格式的优点是有透明度设置，显示JPG图片的速度要快于PNG图片。

RN在iOS平台支持GIF格式或者WeP格式，Android平台默认不支持这两种格式。可以通过修改RN的Android工程的设置让Android平台也支持这两种格式。打开RN项目目录下的android/app/build.gradle文件，需要添加

dependencies {
    compile 'com.facebook.fresco:animated-gif:0.11.0'//需要GIF动画支持
    compile 'com.facebook.fresco:websupport:0.11.0'//需要wep格式支持
    compile 'com.facebook.fresco:animated-webp:0.11.0'//需要wep格式支持
 }

加载网络图片：

<Image source={{uri:'地址'}}/>

某些HTTP或者HTTPS服务器可能需要一些认证信息才会返回图片。

let imageSource={
uri:'地址',
headers: {
    Authorization1: 'authToken',
    Authorization2: 'authToken'
 }
}
<Image source={imageSource}/>

使用Image组件的静态函数getSize取得指定URI地址的图片的宽和高。

let imageSource={
    uri;'地址'
 }
Image.getSize(ImageSource).then((width, height) => {
        ....//取得宽、高
 }).catch((error) => {
    console.log(error);//取得宽、高出错
 })    //使用JS的Promise机制

加载静态图片资源。

<Image source={require('./image/...')} />

在RN开发中，不允许使用字符串变量来指定需要预先加载的图片名称。因为RN在编译代码处理所有require声明，不是运行时动态加载。

RN可以加载Android或者iOS项目中的图片资源。

 

let nativeImageSource = require('nativeImageSource');//导入nativeImageSource函数
reander() {
    let ades = {
        ios:'story-backgtound',
        width: 60, height: '60'
    };
    return (
        <View> 
        <Image source={nativeImageSource(ades)}/>
       </View>
    );
}

Andriod平台，将render函数中的ades变量改为：

  let ades = {
        android:'story-backgtound',
        width: 60, height: '60'
    };

RN在加载文件中的图片时，使用的是不检查机制。

Image组件的样式:样式中必须声明图片的宽高。如果没有声明，则图片将不会被呈现在界面上。

为了精确的显示图片，假设图片的实际分辨率为actrualWidth * actrualHeight,则 定义宽高为actrualWidth/像素密度，actrualHeight/像素密度。

resizeMode有五种取值：contain，cover，stretch，center，repeat。其中repeat值只对iOS平台有效。默认值为：cover。

cover模式：要求填充整个Image定义的显示区域，可以对图片进行放大或者缩小，可以丢弃放大或者缩小后图片中的部分区域只求在显示比例不失真的情况下填充整个显示区域。相当于iOS的fill。

contain模式：显示整张图片，可以对它进行放大或者缩小，但不能丢弃改变后图片的某个部分。相当于iOS的fit。

stretch模式，要求填充整个图片的显示区域，为此按照需要对图片进行任意的缩放，不考虑保持图片的原来的宽、高比。

center模式：要求位于显示区域的中心。

repeat模式：用一张或者多张图片来填充找整个Image定义的显示区域。

tintColor是iOS平台专有的属性，可以让图片中非透明像素部分有一种被染色的效果。

overlayColor是Andriod平台专有属性，在Android平台，在某些情况下无法通过borderRadius实现圆角效果，这是需要overlayColor属性，强行将需要圆角的部分使用指定颜色填充，从而实现圆角效果。

Image组件的其他属性，在通过Iamge罪案读取显示网络上图片资源是，可以通过设置onLoadStart、onLoadEnd、onLoad、onError，四个属性来指定在开始读取与读取结束时需要进行的函数设置。onLoad属性指定的回调函数只有在正确读取到图片资源时才会被执行，而onLoadEnd函数不论读取是否成功都会被执行。onError函数会发生在错误是被调用。

这三个回调函数都会带有一个event参数，但event参数只有一个event.timeStamp有用，记录了事件发生的时间。

Image不是从View组件继承而来的，但支持onLayout回调函数。

Image组件的缓存：iOS平台，RN框架要求移动应用服务器在返回图片是，必须在HTTPS响应HTTP头中，有Cache-Control这个头，对应的值形如：max-age=36000000（以秒为单位）。如果HTTPS响应中没有这个HTTP头，则iOS平台没有图片缓存。如果使用HTTP协议获取图片也没有缓存。

RN允许在指定Image数据源时，在source属性中加入cache建以明确期望使用的图片缓存策略。

cache键的取值有四个：only-if-cache、default、reload、force-cache。

尽量使用网络图片。RN项目中唯一应当存放的图片是没有网络连接时向用户呈现的“无网络连接提醒界面”，而且这个界面使用的图片尽可能小。

因为RN开发，基本上都会使用到热更新技术，允许快速向用户发布新的代码，更新客户端的版本。但RN目前成熟的热更新技术是全量更新，如果项目文件中含有图片，每次热更新时，都会将所有图片打入热更新包中，让用户下载。

可触摸组件。可触摸组件不是一个单独的组件，需要与其他组件协同工作。通过将其他组件定义为可触摸组件的子组件，将该组件变成了一个可触摸组件。在真正商用开发时，代码中会大量用到可触摸组件，使用配合美工给出的图片，能做出精美的按钮等触摸反馈视觉效果。

可触摸组件有TouchableNativeFeedback、TouchableWithoutFeedback、TouchableHightlight、TouchableOpacity四种。

TouchableNativeFeedback是android平台专有组件。需要设置的是background属性，TouchableNativeFeedback.Ripple函数接受两个参数，第一个是按下时按钮的颜色，第二个是涟漪效果是否被限制在TouchableNativeFeedback的显示区域。为布尔值。

TouchableWithoutFeedback组件灭有反馈任何视觉效果，除非特意需要这种效果，否则不要使用这个组件。

当没有特殊要求时，优先考虑使用TouchableOpacity组件。

可触摸组件只能有一个子组件。如果需要将多个组建设置为可触摸效果，则需要将它们放在一个View中，然后让这个View成为可触摸组件的子组件。

TouchableOpacity组件，当一个组件成为TouchableOpacity组件的子组件后，这个组件被触摸时会变成半透明组件

<TouchableOpacity onPress=(this._onPressButton) activeOpacity= {XXX}> //取值0到1.默认值是0.2.

TouchableHighlight组件，当一个组件成为TouchableHighlight组件的子组件后，这个组件被触摸时会产生一种变暗的效果。

解决TouchableHighlight组件在某些情况下发生显示异常，可以在这个组件的旁边的再增加一些其他需要显示的组件，或者为整个背景加一张图片。

TouchableHighlight组件的activeOpacity属性的默认值是0.8。iOS原生按钮相同的效果需要设置为0.85。

TouchableHighlight有三个独有的属性：

onShowUnderlay，回调函数，当下层开始被展现时（也就是被触摸时）被调用。

onHideUnderlay。回调函数，当下层不在展现时被调用。

underlayColor，字符串，指定下层颜色。

可触摸组件的其他属性:

onPress属性是个回调函数，onPress事件会在手指离开组件后马上激活。在手指停留在组件上期间，组件的触摸响应者身份被取消，onPress事件将不会被激活。如果组件没有onPress属性值，触摸组件不会有触摸效果。

onPressIn属性是一个回调函数。onPressIn事件会在手指接触组件delayPressIn毫秒后马上被激活。

onPressOut属性是一个回调函数，OnPressOut事件会在手指接触组件delayPressOut毫秒后马上被激活。

delayLongPress用来设置按了多少毫秒后，onLongPress事件会被激活。如果没有设置，默认是500ms。

delayPressIn用来设置手指接触屏幕多少毫秒后，onPressIn事件会被激活。默认值是0.

delayPressOut用来设置手指离开屏幕多少毫秒后，onPressOut事件会被激活。默认值是0。

pressRetenionOffset是对象类型的属性，格式是：

{
    top: number,
    left: number,
    bottom: number，
    right：number
}  //只能在当前可触摸组件的父组件不可滚动时的情况下设置这个属性,这个属性决定手指移开距组件多远后，可触摸组件会变成不被触摸的状态，为这个参数传入一个常量对象可减少内存消耗