React Native之LayoutAnimation自动布局动画的使用DEMO

使用LayoutAnimation 可以使得布局发生变化时，不会那么生硬，带点感性动画

1.先看效果

QQ20170621-155557.gif

2.直接显示代码
【注1】涉及到ref的使用
栗子1： ref='touchBt' 使用的时候需要这样调用 this.refs.touchBt.props.属性值
栗子2: ref={(ref) => this.touchBt = ref} 使用的时候直接 this.touchbt.props.属性值
这两者是一样的
【注2】setNativeProps 的基础使用，当然也可以直接用setState的方法替代，两者setNativeProps不会重新渲染走render方法，只改变当前对象的属性
setState 重新渲染render 方法

/**
*  设置组建属性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个参数
    *
    *  duration:动画持续的时间
    *  create:创建一个新视图所使用的动画
    *  update:当视图被更新的时候所使用的动画
    *  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',
   }
});