如何在react-native中从顶部动画创建推入

Question

我想在一个来自上方的应用程序屏幕上添加一个过滤器，并将当前内容按字面意思推到底部，如果可以通过使用上/下手指更好地slidable的话。如果没有，没问题，我可以通过标题上的同一过滤器按钮进行切换。

我正在使用来自react-native的Animation API。现在，下面的Animated.View和View都具有flex: 1，我正在通过如下时序动画为Animated.View's translateY设置动画：

toggleFilter() {
        if (this.state.filterOpened) {
            this.closeFilters();
        } else {
            this.openFilters();
        }
    }

    openFilters() {
        this.setState({
            filterOpened: true
        }, () => {
            Animated.timing(this.state.removeAnimation, {
                toValue: Dimensions.get('window').height,
                duration: 400,
                easing: Easing.elastic(0.5),
                useNativeDriver: true
            }).start();
        });
    }

    closeFilters() {
        this.setState({
            filterOpened: false
        }, () => {
            Animated.timing(this.state.removeAnimation, {
                toValue: -Dimensions.get('window').height,
                duration: 400,
                easing: Easing.elastic(0.5),
                useNativeDriver: true
            }).start();
        });
    }

这是我的使用方式：

<View style={{ flex: 1}}>
    <Animated.View
       style={[styles.filterContainer, {
          transform: [
             { translateY: this.state.removeAnimation}
          ]}
       ]}>
       <Text>Hello hello hello content from filter???</Text>
    </Animated.View>
    <View style={{ flex: 1 }}>
       <Text>This is the main container in the screen</Text>
    </View>
 </View>

styles.filterContainer等于：

flex: 1,
padding: 15,
top: -Dimensions.get('window').height

我注意到的是，当然，由于flex: 1，它们都占据了屏幕的一半，而过滤器面板是向上还是向下都没关系。

如何在滤镜将其推下的位置创建推入效果？有任何想法吗？如果可能的话，能够用手指控制它会很好，但是我对此表示怀疑。