我尝试使用过渡打开和关闭我的抽屉，但有一个问题是我的抽屉是在我的屏幕上，这是不满意的。我希望我的屏幕成为我的抽屉。你可以清楚地看到下面（右一个是理想的，左是我到目前为止实现）：
第一节第一节第一节第一节第一次
我尝试使用zIndex对我的风格，但没有运气。这里是我的导航代码：

const IntroStack = createStackNavigator();

const IntroNavigation = () => {
  return (
    <NavigationContainer>
      <IntroStack.Navigator>
        <IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
        <IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
        <IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
        <IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
        <IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='home' component={DrawerNavigation} options={{ headerShown: false }} />
        <IntroStack.Screen name='notfications' component={Notifications} options={{ headerShown: true }} />
      </IntroStack.Navigator>
    </NavigationContainer>
  )
}

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
  const [progress, setProgress] = useState(new Animated.Value(0));
  const rotate = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, -0.28],
  });

  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

  const screenStyles = { transform: [{ rotate, scale }] }

  return (
    <Drawer.Navigator drawerType='slide' drawerStyle={{width: 300}} overlayColor='transparent' sceneContainerStyle={{backgroundColor: '#3170FF'}}  drawerContent={
      (props) => {
        setProgress(props.progress);
        return <DrawerContent {...props} />
      }}>
      <Drawer.Screen name="Home">
        {(props) => <TabNavigation style={screenStyles} />}
      </Drawer.Screen>
    </Drawer.Navigator>

  );
}

const Tab = createBottomTabNavigator();

const TabNavigation = (props) => {

  return (
    <Animated.View style={[{ flex: 1 }, props.style]}>
      <Tab.Navigator tabBarOptions={{
        style: {
          borderTopLeftRadius: 23,
          borderTopRightRadius: 23,
          height: 70,
          alignItems: 'center',
        }
      }} >
        <Tab.Screen name="Home" component={Home} options={{
          tabBarButton: (props) => <TabComponent label='home' {...props} />,
        }} />
        <Tab.Screen name="WorldTour" component={WorldTour} options={{
          tabBarButton: (props) => <TabComponent label='earth' {...props} />,
        }} />
        <Tab.Screen name="Outlet" component={Outlet} options={{
          tabBarButton: (props) => <TabComponent label='compass' {...props} />,
        }} />
        <Tab.Screen name="ChrisLeong" component={ChrisLeong} options={{
          tabBarButton: (props) => <TabComponent label='crown' {...props} />,
        }} />
        <Tab.Screen name="OurTherapists" component={OurTherapists} options={{
          tabBarButton: (props) => <TabComponent label='joint' {...props} />,
        }} />
      </Tab.Navigator>
    </Animated.View>
  );
}

export default IntroNavigation;

我怎样才能解决这个问题？谢谢你！