原生Base Fab onpress无法在Animated.View中使用。

Question

我正在使用包裹有Animated.View的本机基础Fab，但无法使Fab的onpress正常工作。我正在使用Animated.view向下滚动时隐藏Fab，向上滚动时再次显示它。

动画正常运行，但是如果触发至少一次，则Fab的屏幕停止工作。如果我进入屏幕，并且不移动滚动条，那么Fab的onpress效果很好。如果我将Fab更改为按钮或文本，那么相应的onpress始终有效。

我也尝试使用Animated.createAnimatedComponent（Fab），但是动画不起作用。

当Animated.View中包装好时，如何使Fab onpress正常工作？

import React from 'react'
import { Animated, StyleSheet } from 'react-native'
import { Fab, Icon } from 'native-base'
import colors from '../../styles/colors'


type Props = {
    mode: 'CREATE' | 'SAVE' | 'CLONE'
    showBtn?: boolean

    // callback
    onBtnClick (): void
}

const MakeFab: React.FC<Props> = (props: Props): JSX.Element => {
    const { mode, showBtn, onBtnClick } = props

    const [val] = React.useState(new Animated.Value(1))

    const fadeOut = () => {
        Animated.timing(val, {
            toValue : 0,
            duration: 250,
            useNativeDriver: true
        }).start()

    }
    const fadeIn = () => {
        Animated.timing(val, {
            toValue : 1,
            duration: 250,
            useNativeDriver: true
        }).start()
    }

    React.useLayoutEffect(() => {
        if(!props.showBtn) fadeOut()
        else fadeIn()
    }, [props.showBtn])


    const renderIcon = () => {
        switch (mode) {
            case 'CREATE':
                return <Icon name='add' />
            case 'SAVE':
                return <Icon name='ios-save' />
            case 'CLONE':
                return <Icon type={'FontAwesome'} name='clone'/>
            default:
                return <Icon name='add' />
        }
    }

    return (
        showBtn !== undefined ?
            <Animated.View style={{ opacity: val }}>
                <Fab
                    containerStyle={{}}
                    style={styles.FabBtnPrimary}
                    position="bottomRight"
                    // onPress={onBtnClick}>
                    onPress={() => {console.log('clicked')}}>
                    {renderIcon()}
                </Fab>
            </Animated.View>
            :
            <Fab
                containerStyle={{}}
                style={styles.FabBtnPrimary}
                position="bottomRight"
                // onPress={onBtnClick}>
                onPress={() => {console.log('clicked')}}>
                {renderIcon()}
            </Fab>
    )
}

export default MakeFab

const styles = StyleSheet.create({
    FabBtnPrimary: {
        backgroundColor: colors.PRIMARY,
    },
});