使用react-navigation-shared-element时出现navigation.dangerouslyGetState错误求助

问题分析 #

你遇到的TypeScript类型错误，核心原因是createSharedElementStackNavigator的使用方式不正确。该函数需要接收基础的Stack Navigator实例作为参数，而非直接调用。直接调用会导致生成的Navigator组件类型不匹配，进而要求必须传入mode、headerMode等原本可选的属性。

修正后的代码 #

import React from "react"
import { createStackNavigator } from '@react-navigation/stack';
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import Search from "./screens/Search"
import Home from "./screens/Home"

import Entypo from "react-native-vector-icons/Entypo";
import { View } from "react-native";

export default function Navigation() {
    // 先创建基础Stack实例，再传入shared element增强函数
    const BaseStack = createStackNavigator();
    const Stack = createSharedElementStackNavigator(BaseStack);

    const MyTheme = {
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          background: '#FFF',
        }
    }

    return (
        <NavigationContainer theme={MyTheme}>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen 
                    name="Home" 
                    component={Home} 
                    options={{ headerShown: false }}
                />

                <Stack.Screen 
                    name="Search" 
                    component={Search} 
                    options={{
                        headerShown: true,
                        headerTitle: 'Search',
                        headerTitleStyle: {fontSize: 22, fontFamily: 'Gilroy-Bold'},
                        headerBackTitleVisible: false,
                        headerShadowVisible: false,
                        headerBackImage: () => (
                            <View style={{backgroundColor: '#ffffff', borderRadius: '50%', marginLeft: 15, marginBottom: 5}}>
                                <Entypo name="chevron-small-left" size={30} color="#37BD6B"/>
                            </View>
                        )
                    }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

关键修正点 #

• 调整Stack创建逻辑：先通过createStackNavigator()生成基础的Stack实例，再将其传入createSharedElementStackNavigator，确保类型系统正确识别导航器的配置参数。
• 移除多余参数：Navigation作为根导航组件，不需要接收navigation props，直接移除即可避免潜在的上下文冲突。

补充说明 #

react-navigation-sharedElement本质是对原生react-navigation Stack的增强包装，必须依赖基础Stack Navigator的类型定义。错误中提到的mode、headerMode等属性，在正确创建Shared Stack后会继承基础Stack的默认值，无需手动传入。

内容的提问来源于stack exchange，提问作者CodingJunkie