使用LayoutAnimation 可以使得布局發(fā)生變化時，不會那么生硬，帶點感性動畫

1.先看效果

QQ20170621-155557.gif

2.直接顯示代碼
【注1】涉及到ref的使用
栗子1： ref='touchBt' 使用的時候需要這樣調(diào)用 this.refs.touchBt.props.屬性值
栗子2: ref={(ref) => this.touchBt = ref} 使用的時候直接 this.touchbt.props.屬性值
這兩者是一樣的
【注2】setNativeProps 的基礎(chǔ)使用，當(dāng)然也可以直接用setState的方法替代，兩者setNativeProps不會重新渲染走render方法，只改變當(dāng)前對象的屬性
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個參數(shù)
    *
    *  duration:動畫持續(xù)的時間
    *  create:創(chuàng)建一個新視圖所使用的動畫
    *  update:當(dāng)視圖被更新的時候所使用的動畫
    *  delete:刪除一個視圖使用的動畫
    */
   /**
    *  Types：動畫類型有
    *  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',
   }
});