反应导航动画从抽屉到堆栈

Question

我有一些抽屉导航

<Drawer.Navigator
      screenOptions={
        drawerStatus ? screenOptions : {...screenOptions, swipeEnabled: false}
      }
      drawerContent={props => <CustomDrawer {...props} />}
      initialRouteName={'Main'}>
      {screens.map(screen => (
        <Drawer.Screen
          key={screen.name}
          name={screen.name}
          component={screen.component}
        />
      ))}
</Drawer.Navigator>

在此抽屉中，我有一个嵌套的屏幕“帖子细节”

    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name={'PostDetail'} component={PostDetail} />
  </Stack.Navigator>

如果我从抽屉到嵌套的堆栈屏幕或返回抽屉，我不会捕获动画过渡。

Answer 1

显然，仅使用“ CreateRawernAvigator”，无法更改屏幕过渡动画。为此，您必须创建一个“ CreateStackNavigator”，将您的绘图纳维格插入您的“家”。喜欢：

import React from 'react';
import Home from '../pages/home/home';
import HeaderHome from '../shared/headerHome';
import Configuracoes from '../pages/configuracoes';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { DrawerContent } from '../shared/drawerContent';

const Drawer = createDrawerNavigator();
const Content = (navigation: any) => (
    <Drawer.Navigator
        drawerContent={props => <DrawerContent {...props} />}
    >
        <Drawer.Screen name="HomeDrawer" component={Home}
            options={{
                header: (props) => <HeaderHome value={props} /> //My cystom Header
            }}
        />
    </Drawer.Navigator>
);

const Stack = createStackNavigator();
const MyStack: React.FC = () => {
    return (
        <Stack.Navigator
            screenOptions={({ route, navigation }) => ({
                headerMode: "float",
                animationEnabled: true
            })}
        >
            <Stack.Screen name="Home" component={Content} //The name used cannot be identical to the one used in Drawer.Navigator
                options={{ headerShown: false }}
            />
            <Stack.Screen name="Configuracoes" component={Configuracoes}
                options={{
                    title: "Title page",
                    headerStyle: {
                        backgroundColor: "red",
                    },
                    headerTintColor: "#fff"
                }}
            />
        </Stack.Navigator>
    );
}

export default MyStack;