1

我想做一个抽屉导航，但不是从左边或右边来，我想让它从底部滑入。

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>
  );
}

但不幸的是，它没有奏效。有什么建议么？

4

1 回答 1

0

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

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

底部抽屉视图：

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}}
      />
于 2021-09-16T13:17:40.327 回答