React native 带有动画回调的react挂钩存在问题 import React，{useffect，useState}来自“React”； 从“本机基”导入{Col}； 从“react native”导入{动画、TouchableOpacity、ViewProps}； 界面动画按钮操作扩展ViewProps{ 文本：字符串； 大小：动画。值； onPress：（cb？：（）=>void）=>void； } 导出常量AnimatedButton=（{text，size，onPress}:AnimatedButtonProps）=>{ const[defaultSize，setDefaultSize]=useState（新的动画.Value（30））； useffect（（）=>{ //从道具更新defaultSize 设置默认大小（大小）； }); 让我们按一下=（）=>{ console.log（defaultSize）； 动画。计时（默认大小{ toValue:50， 持续时间：300， }).start（）； console.log（defaultSize）； }; 返回( onPress（_onPress）}> {text} ) };

我不熟悉react钩子，试图用react钩子重写我的一个组件。有人能告诉我为什么回调动画不起作用吗？回调确实触发了，但defaultSize根本没有改变。下面是我最初的组件，它是以“React类”的方式编写的，可以正常工作。我会非常感激你的帮助

import React, {useEffect, useState} from 'react';
import {Col} from "native-base";
import {Animated, TouchableOpacity, ViewProps} from "react-native";

interface AnimatedButtonProps extends ViewProps {
    text: string;
    size: Animated.Value;
    onPress: (cb?: () => void) => void;
}

export const AnimatedButton = ({text, size, onPress}: AnimatedButtonProps) => {
    const [defaultSize, setDefaultSize] = useState(new Animated.Value(30));

    useEffect(() => {
        // Update defaultSize from props
        setDefaultSize(size);
    });

    let _onPress = () => {
        console.log(defaultSize);

        Animated.timing(defaultSize, {
            toValue: 50,
            duration: 300,
        }).start();
        console.log(defaultSize);
    };

    return (
        <Col style={{justifyContent: "center", alignItems: "center"}}>
            <TouchableOpacity style={{
                width: 60,
                height: 60,
                justifyContent: "center",
                alignItems: "center",
            }}
                              onPress={() => onPress(_onPress)}>
                <Animated.Text style={{
                    fontSize: defaultSize,
                    fontWeight: "bold"
                }}>{text}</Animated.Text>
            </TouchableOpacity>
        </Col>
    )
};

class AnimatedButton扩展组件{
状态：AnimatedButtonState=initState；
componentDidMount（）：void{
const{size}=this.props；
这是我的国家({
大小
})
}
_onPress=（）=>{
const{size}=this.state；
动画序列([
动画。计时（大小{
toValue:50，
持续时间：300，
}),
动画。计时（大小{
toValue:30，
持续时间：300，
})
]).start（）；
};
render（）{
const{text}=this.props；
const{size}=this.state；
返回(
this.props.onPress（this.\u onPress）}>
{text}
);
}
}
导出默认动画按钮；

解决了这个问题

解决了这个问题

class AnimatedButton extends Component<AnimatedButtonProps, AnimatedButtonState> {
    state: AnimatedButtonState = initState;

    componentDidMount(): void {
        const {size} = this.props;

        this.setState({
            size
        })
    }

    _onPress = () => {
        const {size} = this.state;

        Animated.sequence([
            Animated.timing(size, {
                toValue: 50,
                duration: 300,
            }),
            Animated.timing(size, {
                toValue: 30,
                duration: 300,
            })
        ]).start();
    };

    render() {
        const {text} = this.props;
        const {size} = this.state;

        return (
            <Col style={{justifyContent: "center", alignItems: "center"}}>
                <TouchableOpacity style={{
                    width: 60,
                    height: 60,
                    justifyContent: "center",
                    alignItems: "center",
                }}
                                  onPress={() => this.props.onPress(this._onPress)}>
                    <Animated.Text style={{
                        fontSize: size,
                        fontWeight: "bold"
                    }}>{text}</Animated.Text>
                </TouchableOpacity>
            </Col>
        );
    }
}

export default AnimatedButton;

    useEffect(() => {
        setDefaultSize(size);
    }, [defaultSize]);