React Native实现底部弹出菜单

我们先看看效果：

这个功能，和前面写的下拉菜单，实际上是一样的，只是一个从上面出来，一个从下面出来，那么，我们直接就知道了，组件由两部分组成：1. 遮罩层，2. 弹出菜单

        <Couverture
          onPress={() => this.popupHide()}
          isShow={isActive}
          opacity={fadeAnim}
          zIndex={5}
        />

弹出菜单组件：

        <Animated.View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            width,
            zIndex: 20,
            transform: [
              { translateY },
            ]
          }}
        >
          <View style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width,
            height,
            zIndex: 30,
          }}
          >
            <Animated.View
              style={{
                position: 'absolute',
                left: 0,
                bottom: 0,
                backgroundColor: '#FFF',
                width,
                height: this.state.popupHeight + 50,
                transform: [
                  { translateY },
                ]
              }}
            >
              {this.header()}
              {content}
            </Animated.View>
          </View>
        </Animated.View>

在这两个写好之后，我们就可以写打开和关闭的两个方法了。

打开弹窗：

  // 打开弹窗
  openPanel = () => {
    const { animatedValue } = this.state;
    // 设置动画为0
    animatedValue.setValue(0);
    // 执行动画
    Animated.spring(
      animatedValue, {
        toValue: 1, // 透明度最终变为1，即完全不透明
        // @ts-ignore
        duration: 300, // 让动画持续一段时间
        useNativeDriver: true // <-- 加上这一行
      }
    ).start();
  };

关闭弹窗：

注意：这里在执行完成后。需要把遮罩层也关闭了哦

  popupHide = () => {
    const { animatedValue } = this.state;
    // 设置动画为0
    animatedValue.setValue(1);
    // 执行动画
    Animated.spring(
      animatedValue, {
        toValue: 0, // 透明度最终变为1，即完全不透明
        // @ts-ignore
        duration: 300, // 让动画持续一段时间
        useNativeDriver: true // <-- 加上这一行
      }
    ).start(() => this.setState({ isAction: false }));
  };