使用LayoutAnimation 可以使得布局發(fā)生變化時(shí)泽腮，不會(huì)那么生硬考余，帶點(diǎn)感性動(dòng)畫(huà)

1.先看效果

QQ20170621-155557.gif

2.直接顯示代碼
【注1】涉及到ref的使用
栗子1： ref='touchBt' 使用的時(shí)候需要這樣調(diào)用 this.refs.touchBt.props.屬性值
栗子2: ref={(ref) => this.touchBt = ref} 使用的時(shí)候直接 this.touchbt.props.屬性值
這兩者是一樣的
【注2】setNativeProps 的基礎(chǔ)使用骤坐，當(dāng)然也可以直接用setState的方法替代券犁，兩者setNativeProps不會(huì)重新渲染走render方法寄锐，只改變當(dāng)前對(duì)象的屬性
setState 重新渲染render 方法

/**
*  設(shè)置組建屬性setNativeProps
*
*
*/

'use strict'
import React, {Component} from 'react'
import {
   Navigator,
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   PixelRatio,
   Dimensions,
   Button,
   ScrollView,
   LayoutAnimation
} from 'react-native'

const {width, height} = Dimensions.get('window');


var CustomLayoutAnimation = {
   /**
    *  onfig 指定4個(gè)參數(shù)
    *
    *  duration:動(dòng)畫(huà)持續(xù)的時(shí)間
    *  create:創(chuàng)建一個(gè)新視圖所使用的動(dòng)畫(huà)
    *  update:當(dāng)視圖被更新的時(shí)候所使用的動(dòng)畫(huà)
    *  delete:刪除一個(gè)視圖使用的動(dòng)畫(huà)
    */
   /**
    *  Types：動(dòng)畫(huà)類型有
    *  spring: 彈跳 linear: 線性 easeInEaseOut: 緩入緩出 easeIn:緩入 easeOut: 緩出 keyBoard:鍵入
    * */
   /**
    *  Properties 屬性有
    *  opcity:透明度  scaleXY 縮放
    * */

   duration: 1300,
   create: {
       type: LayoutAnimation.Types.easeInEaseOut,
       property: LayoutAnimation.Properties.opacity,
   },
   update: {
       type: LayoutAnimation.Types.spring,
      property: LayoutAnimation.Properties.scaleXY,
   },
   delete: {
       type: LayoutAnimation.Types.linear,
       property: LayoutAnimation.Properties.opacity,
   }
}

export default class SetnativeProps extends Component {

   constructor(props) {
       super(props);
       this.state = {}
   }
   componentDidMount() {
   }
   handelAction = (flag)=> {
       LayoutAnimation.configureNext(CustomLayoutAnimation);
       this.refView.setNativeProps({
           style: {backgroundColor: 'tomato', height: flag === 'open' ? 350 : 0}
       });
   }

   render() {

       return (
           <View style={styles.container}>
               <ScrollView
               >
                   <Button
                       title='open'
                       color='green'
                       onPress={()=> {
                           this.handelAction('open');
                       }}
                       ref={(ref) => this.touchBt = ref}
                   />
                   <View
                       ref={(c) => this.refView = c}
                       style={{backgroundColor: '#e5e55e', width: width, height: 0}}/>
                   <Button
                       title='close'
                       color='green'
                       onPress={()=> {
                           this.handelAction('close');
                       }}
                       ref={(ref) => this.touchBt1 = ref}
                   />
               </ScrollView>
           </View>
       );
   }
}

const styles = StyleSheet.create({
   container: {
       paddingTop: 100,
       flex: 1,
       backgroundColor: '#F5FCFF',
   },
   bgView: {
       top: 100,
       width: width,
       height: 100,
       backgroundColor: '#eeeeee',
       justifyContent: 'center',
       alignItems: 'center',
   }
});