React-Native：动画组件以在其他组件的顶部滑动

Question

我目前正在开发本机应用程序以播放视频。现在我想要一个组件，单击该组件时，它会滑入另一个组件的顶部-像下拉菜单一样，但位于顶部。

我已经弄清楚了如何制作动画，但是问题是，新组件覆盖的组件也是可触摸的。现在，我希望新滑动的组件能够获得触摸事件，因为应该可以在其中进行选择，但是实际上只有下面的组件才能获得触摸。我尝试将zIndex添加到样式中，但是我不知道为什么这不可能。

以下是处理此行为的组件的基本测试代码，我们非常感谢您的帮助。当前，所有可能发生的事情是第二个touchableopacity应该滑入，并在再次按下时滑出：

export default class ExtendedControlsComponent extends Component {
constructor(props) {
    super(props)
    this.state = {}

}

componentDidMount() {

}

render() {
    return (
        <Animated.View
            onLayout={(event) => {
                let {height} = event.nativeEvent.layout;
                (!this.state.viewHeight) && this.setState({
                    viewHeight : new Animated.Value(height),
                    viewPosition: new Animated.Value(height),
                    height: height,
                })
            }}
            style={[customStyles.extendedControlsView, this.state.viewHeight && {height: this.state.viewHeight}]}>


                <TouchableOpacity
                    onPress={this.animate.bind(this)}
                    style={[{height: '100%'}]}

                >
                    <Text>
                        test
                    </Text>

                </TouchableOpacity>
                <TouchableOpacity
                    onPress={this.animate.bind(this)}
                    style={[{
                        position:'absolute',
                        backgroundColor: constants.colors.green,
                        height:0,
                        left:0,
                        width:'100%',
                        transform: [{'translate':[0,0,1]}]
                    }, this.state.viewPosition && {height:2*this.state.height, top:this.state.viewPosition}]}
                    >
                    <Text>
                        test2
                    </Text>
                </TouchableOpacity>
        </Animated.View>
    )
}

async animate() {
    if(this.state.viewPosition._value < this.state.height) {
        Animated.timing(
            this.state.viewPosition,
            {
                toValue: this.state.height,
                //easing: Easing.elastic(),
                duration: 500,

            }
        ).start()
    } else {
        Animated.timing(
            this.state.viewPosition,
            {
                toValue: -2*this.state.height,
                easing: Easing.elastic(),
                duration: 500,

            }
        ).start()
    }
}

}