在 params 中传递函数时，在导航状态中发现了不可序列化的值答案

【问题标题】：non-serializable values were found in the navigation state when passing a function in params在 params 中传递函数时，在导航状态中发现了不可序列化的值
【发布时间】：2021-05-24 09:19:43
【问题描述】：

我有两个屏幕：

屏幕A

import React, { useState } from "react";
import { Text, View, Button } from "react-native";
const ViewA = ({ navigation }) => {
  const [val, setVal] = useState(null);
  const [val2, setVal2] = useState(null);
  const callBack = (value1,value2) => {
    setVal(value1);
    setVal2(value2);
  };
  const onNextPress = () => {
    navigation.navigate("Second Screen", { callBack: callBack });
  };
  return (
    <View>
      <Text>{val}{val2}</Text>
      <Button title="Next" onPress={onNextPress} />
    </View>
  );
};
export default ViewA;

屏幕 B

import React from "react";
import { View, Button } from "react-native";

const ViewB = ({ route, navigation }) => {
  const onBackPress = () => {
    const { callBack } = route.params;
    callBack(5,6); // Your new value to set
    navigation.goBack();
  };

  return (
    <View>
      <Button title="back" onPress={onBackPress} />
    </View>
  );
};
export default ViewB;

当我进入屏幕 B 时，会出现警告：在导航状态下发现了不可序列化的值。我该如何解决？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

根据I get the warning "Non-serializable values were found in the navigation state" 的文档

如果您在参数中传递类实例、函数等不可序列化的值，就会发生这种情况。在这种情况下，React Navigation 会向您发出警告，因为这可能会破坏其他功能，例如 state persistence、deep linking 等。

...

如果您不使用状态持久性或深度链接到接受参数中的函数的屏幕，则警告不会影响您，您可以放心地忽略它。要忽略警告，您可以使用YellowBox.ignoreWarnings。

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Non-serializable values were found in the navigation state',
]);

另一种方法是将状态移动到路由参数中，而不是 ViewA 的本地状态（这意味着您可以在导航时设置它）：

import React, {useState, useEffect} from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const ViewA = ({ route, navigation }) => {
  const onNextPress = () => {
    navigation.navigate("ViewB", {
      previousScreen: route.name
    });
  };

  return (
    <View>
      <Text>ViewA</Text>
      <Text>Params: {JSON.stringify(route.params)}</Text>
      <Button title="Next" onPress={onNextPress} />
    </View>
  );
};

const ViewB = ({ route, navigation }) => {
  const onBackPress = () => {
    navigation.navigate(route.params.previousScreen, {
      val: 5,
      val2: 6,
    })
  };

  return (
    <View>
      <Text>ViewB</Text>
      <Text>Params: {JSON.stringify(route.params)}</Text>
      <Button title="back" onPress={onBackPress} />
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="ViewA" component={ViewA} />
        <Stack.Screen name="ViewB" component={ViewB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Snack

【讨论】：

为您的向导提供了很多帮助。我忽略了警告
仅供参考 YellowBox 从 RN 0.63 起已弃用。请改用LogBox

【解决方案2】：

我收到了同样的警告，我使用 JSON.stringify 来解决这个问题，

从这里

const onNextPress = () => {
    navigation.navigate("Second Screen", { callBack: callBack });
  };

到这里

const onNextPress = () => {
    navigation.navigate("Second Screen", { callBack: JSON.stringify(callBack) });
  };

【讨论】：