先看效果

这个一个渐渐显示的动画，代码如下

import React from 'react';
import { Animated, Text, View } from 'react-native';class FadeInView extends React.Component {//定义状态state = {fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0}componentDidMount() {Animated.timing(                  // Animate over timethis.state.fadeAnim,            // The animated value to drive{toValue: 1,                   // Animate to opacity: 1 (opaque)duration: 10000,              // Make it take a while}).start();                        // Starts the animation}render() {let { fadeAnim } = this.state;return (<Animated.View                 // Special animatable Viewstyle={{...this.props.style,opacity: fadeAnim,         // Bind opacity to animated value}}>{this.props.children}</Animated.View>);}
}// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {render() {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}><Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text></FadeInView></View>)}
}

第二个demo
点击图形变大
先看效果

再看代码如下

import React from 'react';
import {NativeModules,LayoutAnimation,Text,TouchableOpacity,StyleSheet,View,
} from 'react-native';const { UIManager } = NativeModules;UIManager.setLayoutAnimationEnabledExperimental &&UIManager.setLayoutAnimationEnabledExperimental(true);export default class App extends React.Component {state = {w: 100,h: 100,};_onPress = () => {// Animate the updateLayoutAnimation.spring();this.setState({w: this.state.w + 15, h: this.state.h + 15})}render() {return (<View style={styles.container}><View style={[styles.box, {width: this.state.w, height: this.state.h}]} /><TouchableOpacity onPress={this._onPress}><View style={styles.button}><Text style={styles.buttonText}>Press me!</Text></View></TouchableOpacity></View>);}
}const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',justifyContent: 'center',},box: {width: 200,height: 200,backgroundColor: 'red',},button: {backgroundColor: 'black',paddingHorizontal: 20,paddingVertical: 15,marginTop: 15,},buttonText: {color: '#fff',fontWeight: 'bold',},
});