时间戳

首页 > 解决方案 > 在 params 中传递函数时，在导航状态中发现了不可序列化的值

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

问题描述

我有两个屏幕：

屏幕 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 时，出现警告：在导航状态下发现了不可序列化的值。我该如何解决？

标签： reactjsreact-nativereact-navigation

解决方案

根据文档，我收到警告“在导航状态中发现了不可序列化的值”

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

...

如果您不使用状态持久性或深度链接到接受参数中的函数的屏幕，则警告不会影响您，您可以放心地忽略它。要忽略警告，您可以使用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>
  );
}

小吃

推荐阅读