如何将resizeMode添加到createAnimatedComponent（ImageBackground）

Question

我正在关注handlebarlabs货币转换器教程，以进行本机反应，并遇到以下问题：

使用createAnimatedComponent（）创建动画ImageBackground组件时，resizeMode =“ contain”不再适用。我知道可以使用View组件或绝对位置来解决此问题，但这对我来说似乎是一个疏忽。无法将resizeMode应用于自定义动画组件吗？

屏幕截图

import React, { Component } from 'react'
import { View, ImageBackground, Text, Keyboard, Animated, Platform } from 'react-native'

import styles from './styles'

const AnimatedImageBackground = Animated.createAnimatedComponent(ImageBackground)
const ANIMATION_DURATION = 250

class Logo extends Component {
    constructor(props) {
        super(props)

        this.containerImageWidth = new Animated.Value(styles.$largeContainerSize)
        this.imageWidth = new Animated.Value(styles.$largeImageSize)
    }

    componentDidMount() {
        console.log('COMP DID MOUNT')
        let showListener = 'keyBoardWillShow'
        let hideListener = 'keyBoardWillHide'
        if (Platform.OS === 'android') {
            showListener = 'keyboardDidShow'
            hideListener = 'keyboardDidHide'
        }

        this.keyboardShowListener = Keyboard.addListener(showListener, this.keyboardShow)
        this.keyboardHideListener = Keyboard.addListener(hideListener, this.keyboardHide)
    }

    componentWillUnmount() {
        this.keyboardShowListener.remove()
        this.keyboardHideListener.remove()
    }

    keyboardShow = () => {
        console.log('KEYBOARD DID SHOW')
        console.log('CONTAINER IMAGE WIDTH', this.containerImageWidth)

        Animated.parallel([
            Animated.timing(this.containerImageWidth, {
                toValue: styles.$smallContainerSize,
                duration: ANIMATION_DURATION
            }),
            Animated.timing(this.imageWidth, {
                toValue: styles.$smallImageSize,
                duration: ANIMATION_DURATION
            })
        ]).start()
    }

    keyboardHide = () => {
        console.log('KEYBOARD DID HIDE')
        console.log('CONTAINER IMAGE WIDTH', this.containerImageWidth)

        Animated.parallel([
            Animated.timing(this.containerImageWidth, {
                toValue: styles.$largeContainerSize,
                duration: ANIMATION_DURATION
            }),
            Animated.timing(this.imageWidth, {
                toValue: styles.$largeImageSize,
                duration: ANIMATION_DURATION
            })
        ]).start()

    }

    render() {

        const containerImageStyle = [
            styles.containerImage,
            { width: this.containerImageWidth, height: this.containerImageWidth }
        ]

        const imageStyle = [
            styles.logo,
            { width: this.imageWidth }
        ]

        console.log('CONTAINER IMAGE STYLE: ', containerImageStyle)

        return (
            <View style={styles.container}>
                <AnimatedImageBackground
                    resizeMode="contain"
                    style={containerImageStyle}
                    source={require('./images/background.png')}
                >
                    <Animated.Image
                        resizeMode="contain"
                        style={imageStyle}
                        source={require('./images/logo.png')}
                    />
                </AnimatedImageBackground>
                <Text style={styles.text}>Currency Converter</Text>
            </View>
        )
    }
}

export default Logo