React Native导航状态存在不可序列化值问题求助

问题原因 #

你直接把navigation对象作为参数传递给下一个页面了，而navigation内部包含函数、循环引用等无法被序列化的内容。React Navigation会将导航状态序列化存储（比如持久化到本地），因此检测到非序列化值时就会抛出黄色警告。

解决方法 #

方法1：直接使用页面自带的navigation prop（推荐） #

所有通过React Navigation路由渲染的页面，都会自动接收navigation prop，完全不需要手动传递。修改代码如下：

PageOne代码：

const PageOne=({navigation})=>{
...
onPress={() => { navigation.navigate("PageTwo") }}>

PageTwo代码：

const SettingsPage = ({navigation, route}) => {
// 直接使用当前页面的navigation，无需从route.params中获取
}

方法2：传递具体操作函数而非整个navigation对象 #

如果需要在PageTwo触发特定的导航操作，可以把封装好的函数作为参数传递（建议用useCallback包裹，避免不必要的重渲染）：

PageOne代码：

import { useCallback } from 'react';

const PageOne=({navigation})=>{
  const navigateToHome = useCallback(() => {
    navigation.navigate('Home');
  }, [navigation]);

...
onPress={() => { navigation.navigate("PageTwo", { navigateToHome }) }}>

PageTwo代码：

const SettingsPage = ({route}) => {
  const { navigateToHome } = route.params;

  // 需要时直接调用navigateToHome()即可
}

方法3：禁用警告（不推荐） #

如果以上方法都不适用，可以在导航容器中禁用该警告，但这会掩盖潜在的序列化问题，可能影响状态持久化功能：

import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer
  ignoreWarnings={['Non-serializable values were found in the navigation state']}
>
  {/* 你的导航栈结构 */}
</NavigationContainer>

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