在更改绝对视图的高度时更改背景的不透明度使用Panresponder？

Question

我想使用React Native（0.61）中的任何第三方库来实现向上滑动面板。每当面板（底部抽屉）的高度发生变化时，我都希望更改背景（容器）的不透明度。

这是render()的代码：-

render() {

        return (
            <>
                <Animated.View style={[styles.container, { opacity: this.opacity }]}>
                           //want to change opacity of this view
                </Animated.View>
                <Animated.View

                    style={[styles.bottomDrawer, this.position.getLayout()]}>
                    <Animated.View
                        {...this.panresponder.panHandlers}
                        style={{ height: 100, backgroundColor: 'violet', width: '100%' }}>

                    </Animated.View>
                </Animated.View>
            </>
        );
    }

Stylesheet部分：-

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
        flexDirection: 'row',
    },
    bottomDrawer: {
        position: 'absolute',
        flex: 1,
        minHeight: 400,
        zIndex: 9999,
        backgroundColor: 'orange',
        width: '100%',
        bottom: 0
    }
});

PanResponder部分的代码

constructor(props) {
        super(props);
        this.position = new Animated.ValueXY({ x: 0, y: 500 });
        this.opacity = new Animated.Value(1);
        this.state = {
            collapsed: true
        }
        this.panresponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,

        onPanResponderMove: (e, gesture) => {

            if (gesture.moveY < 500) {
                if (this.state.collapsed) {
                    this.position.setValue({ x: 0, y: gesture.moveY > 100 ? gesture.moveY : 100 }); // height manipulation code
                    this.opacity.interpolate({
                        inputRange:[0,0.7,1],
                        outputRange:[1,0.5,0]
                    })
                }
            }
        },

        onPanResponderRelease: (e, gesture) => {
            if (Math.abs(gesture.vy) >= 0.2 || Math.abs(gesture.dy) >= 30) {
                Animated.timing(this.position, {
                    toValue: { x: 0, y: 100 },
                    duration: 300,
                    easing: Easing.ease
                }).start(() => {
                    this.setState({ collapsed: false })
                });
            }

        }
    })
    }

我只想更改底部抽屉的高度时更改容器的不透明度。如何实现呢？