import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Animated, Image, Easing } from 'react-native'; const IMG_URI = 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'; export default class Component { constructor(props) { super(props); //使用 ** Animated.Value** 声明了一个 spinValue 变量,并传了一个 0 作为初始值 this.spinValue = new Animated.Value(0.3); } spring () { this.spinValue.setValue(0.3);//this.spinValue 重置成 0 Animated.spring( this.spinValue, { toValue: 1,//终值 friction : 1, } ).start(); } render () { return ( <View style={styles.container}> <Text style={{marginBottom: 30 , fontSize : 20, fontWeight : 'bold'}} //使得 方法spring 绑定 组件 Text 点击该组件时,使nimated.Image弹起并伴有 伸缩效果 从本身大小的0.3-1 onPress={this.spring.bind(this)}>点击 Spring</Text> <Text></Text> <Animated.Image style={{ width: 220, height: 200, transform: [{scale: this.spinValue}] }} source={{uri:IMG_URI}}/> <Text></Text> </View> ); } } const styles = StyleSheet.create({ container: { marginTop: 100, justifyContent: 'center', alignItems: 'center', } });