使反应导航抽屉从底部弹出而不是从左/右弹出答案

【问题标题】：Make react-navigation drawer pop from bottom instead of left/right使反应导航抽屉从底部弹出而不是从左/右弹出
【发布时间】：2020-04-29 14:18:39
【问题描述】：

我想做一个抽屉导航，但不是从左侧或右侧来，而是希望能够让它从底部滑入。

https://reactnavigation.org/docs/drawer-navigator#!

我找到了有关创建自定义抽屉组件的文档并尝试了以下操作：

function CustomDrawerContent({ progress, ...rest }) {
  const translateY = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <DrawerContentScrollView {...props} style={{ transform: [{ translateY }] }}>
      <Animated.View =>
        {/* ... drawer contents */}
      </Animated.View>
    </DrawerContentScrollView>
  );
}

但不幸的是，它没有用。有什么建议吗？

【问题讨论】：

标签： react-native react-navigation bottom-sheet react-navigation-drawer

【解决方案1】：

虽然这可以追溯到很久以前，但我想出了一个解决方法，至少它的目标是表现得像 Bottom Drawer。

我的第一次尝试也是修改抽屉组件以从不同的方向向上滑动。我和你一样挣扎。绝望地浏览文档，幸运的是，我偶然发现了 React Navigation 本身提供的transparent modal presentatation。?

底部抽屉视图：

import React from 'react';
import {Animated, Pressable, StyleSheet, View} from 'react-native';
import {useNavigation} from '@react-navigation/core';
import {useTheme} from '@react-navigation/native';
import {useCardAnimation} from '@react-navigation/stack';

export interface IBottomDrawer {}

const BottomDrawer: React.FC<IBottomDrawer> = () => {
  const navigation = useNavigation();
  const {colors} = useTheme();
  const {current} = useCardAnimation();

  const styles = StyleSheet.create({
    bottomView: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    modalView: {
      padding: 16,
      paddingTop: 0,
      width: '100%',
      borderTopStartRadius: 20,
      borderTopEndRadius: 20,
      backgroundColor: colors.card,
      transform: [
        {
          translateY: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [100, 0],
          }),
        },
      ],
    },
  });

  return (
    <View style={styles.bottomView}>
      <Pressable style={StyleSheet.absoluteFill} onPress={navigation.goBack} />
      <Animated.View style={styles.modalView}>
        <!-- Add Drawer Items that use navigation.navigate('to-my-route') -->
      </Animated.View>
    </View>
  );
};

export default BottomDrawer;

使用上述透明模式表示的 StackNavigator：

<MainStack.Screen name="Root" component={RootNavigator} />
<MainStack.Screen
        name="BottomDrawer"
        component={BottomDrawer}
        options={{presentation: 'transparentModal', cardOverlayEnabled: true}}
      />

【讨论】：