react-native

Question

嗨，我的HeaderRight中有一个图像，我想通过放大/缩小效果对其进行动画处理。我如何使用Animated库来解决这个问题？

谢谢！

 let headerRight = (
      <TouchableOpacity onPress = {() => {this.openDialog(true)} }>
          <View style={{ flexDirection:'row', justifyContent: 'space-around'}}>
          <View style={{borderRadius: 30, padding:4, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
          <Image 
              style={{ width:28, height: 28}}
              source={require("../Images/icone-sonnerie.png")}/>
         </View>
         </View>
        </TouchableOpacity>
    );

Answer 1

您可以像这样实现动画的touchableOpacity

创建课程

import React from 'react'

import {
    Animated,
    TouchableOpacity
} from 'react-native'

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity)

class AnimatedTouchableOpacity extends React.Component {
    state = {
        scale: new Animated.Value(1)
    }

    ScaleTheTouchable(toValue, withDuration) { //Call this function in this class in onPress or another event call you want with your scale (1 is the normal size) and duration in miliseconds
        Animated.timing(
            this.state.scale,
            {
                toValue: toValue,
                duration: withDuration
            },
        ).start()
    }

    render() {
        return (
            <AnimatedTouchable
                style = {[
                    {
                        transform: [{
                            scale: this.state.scale
                        }]
                    },
                    this.props.style
                ]}
            >
                {this.props.children}//Your image or another view inside button goes here...
            </AnimatedTouchable>
        )
    }
}

然后您可以这样称呼

let headerRight = (
      <AnimatedTouchableOpacity style = {{}} >
          <View style={{ flexDirection:'row', justifyContent: 'space-around'}}>
          <View style={{borderRadius: 30, padding:4, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
          <Image 
              style={{ width:28, height: 28}}
              source={require("../Images/icone-sonnerie.png")}/>
         </View>
         </View>
      </AnimatedTouchableOpacity>
    )