React Native 错误：在导航状态中发现不可序列化的值。onPress(函数)

Question

我正在尝试解决 React Native 导航的错误Non-serializable values were found in the navigation state. Alert > params.action[0].onPress (Function)。我不认为该函数没有像错误指出的那样传递给参数，但每次我按下图标时它都会返回相同的错误。如果有任何建议或意见，我将不胜感激。

export default function Alert({ route, navigation }) {
  const { colors } = useTheme();
  const { t } = useTranslation();
  const { title, message, action, option, type } = route?.params;
  const success = type === "success";
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => !option?.cancelable
    );

    return () => backHandler.remove();
  }, [option?.cancelable]);

  const renderButtonFirst = () => {
    const firstTitle = action?.[0]?.text ?? t("close");
    const onPressNo = action?.[0];
    return (
      <TouchableOpacity
        onPress={() => {
          onPressNo?.onPress();
          if (option?.cancelable) navigation.goBack();
        }}
      >
        <Text>
          {firstTitle}
        </Text>
      </TouchableOpacity>
    );
  };

  const renderButtonSecond = () => {
    const secondTitle = action?.[1]?.text;
    const onPressYes = action?.[1];
    if (title && onPressYes) {
      return (
        <TouchableOpacity
          onPress={() => {
            onPressYes?.onPress();
            if (option?.cancelable) navigation.goBack();
          }}
        >
          <Text>
            {secondTitle}
          </Text>
        </TouchableOpacity>
      );
    }
  };

  return (
   <View>
<Icon name={success ? "check-circle" : "question-circle"} />
        </View>
        <View>
          <Text>
            {title}
          </Text>
          <Text>
            {message}
          </Text>
        </View>
        <View >
          {renderButtonFirst()}
          {renderButtonSecond()}
        </View>
      </View>
    </View>
  );
}

这是父组件，以防万一。Alert但正如它所说，这个错误来自 组件。

const onOpen = (type, title, link) => {
    Alert.alert({
      title: title,
      message: `${t("do_you_want_open")} ${title} ?`,
      action: [
        {
          text: t("cancel"),
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel",
        },
        {
          text: t("done"),
          onPress: () => {
            switch (type) {
              case "web":
                Linking.openURL(link);
                break;
              case "phone":
                Linking.openURL("tel://" + link);
                break;
              case "email":
                Linking.openURL("mailto:" + link);
                break;
              case "address":
                Linking.openURL(link);
                break;
            }
          },
        },
      ],
    });
  };

  {product?.website.length > 0 && (
              <TouchableOpacity
                onPress={() => {
                  onOpen("web", t("Website"), product?.website);
                }}
              >
                <View>
                  <Image
                    source={Images}
                  />
                </View>
              </TouchableOpacity>
            )}

更新 4/1 这是导航组件，以防万一；

import AlertScreen from "@screens/Alert";
export default function Navigator() {
...

  return (
    <AppearanceProvider>
      <NavigationContainer theme={theme}>
          <RootStack.Screen
            name="Alert"
            component={AlertScreen} 
              gestureEnabled: false,
            }}
          />
        </RootStack.Navigator>
      </NavigationContainer>
    </AppearanceProvider>
  );
}

Answer 1

来自反应导航文档

如果您在参数中传递不可序列化的值（例如类实例、函数等），则可能会发生这种情况。在这种情况下，React Navigation 会向您发出警告，因为这可能会破坏其他功能，例如状态持久性、深度链接等。

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

如果您使用的react-native版本> 0.63，请使用：

从'react-native'导入{LogBox}；

LogBox.ignoreLogs([ '在导航状态中发现不可序列化的值', ]);