如何在这个简单的代码中从导航反应 4 升级到导航 5

Posted

技术标签:

【中文标题】如何在这个简单的代码中从导航反应 4 升级到导航 5【英文标题】:How to do the upgrade from navigation reaction 4 to navigation 5 in this simple code 【发布时间】:2021-02-08 02:39:56 【问题描述】:

这是我要升级的代码

这个函数:

function AddNotes( navigation ) 
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() 
    navigation.state.params.addNote( noteTitle, noteDescription );
    navigation.goBack();
  

消息错误:

未定义在不是评估 navigation.state.params 的对象中

控制台错误:

在导航状态中发现了不可序列化的值,可以 中断使用,例如持久化和恢复状态。这可能会发生 如果您传递了不可序列化的值,例如函数、类 params 中的实例等。如果您需要使用带有回调的组件 在您的选项中,您可以改用“navigation.setOptions”。看 https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state 了解更多详情。

node_modules\react-native\Libraries\YellowBox\YellowBox.js:71:8 in console.warn node_modules\expo\build\environment\muteWarnings.fx.js:18:23 警告 node_modules@react-navigation\core\src\BaseNavigationContainer.tsx:258:10 in React.useEffect$argument_0 node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16921:31 在 commitHookEffectList 中 node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16970:29 在 commitPassiveHookEffects 中 node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 在invokeGuardedCallbackImpl node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 在invokeGuardedCallback node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20061:28 在flushPassiveEffectsImpl中 [本机代码]:flushPassiveEffectsImpl 中为空 node_modules\scheduler\cjs\scheduler.development.js:643:23 in stable_runWithPriority node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19597:25 在 scheduleCallback$argument_1 node_modules\scheduler\cjs\scheduler.development.js:482:68 in flushTask node_modules\scheduler\cjs\scheduler.development.js:607:20 influshWork node_modules\scheduler\cjs\scheduler.development.js:58:18 in _flushCallback node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer node_modules\react-native\Libraries\Core\Timers\JSTimers.js:399:17 in callTimers node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 在 __callFunction 中 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 在 __guard$argument_0 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 在 __guard node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 在 __guard$argument_0 [native code]:null in callFunctionReturnFlushedQueue

【问题讨论】:

【参考方案1】:

在 React Navigation 5 中,您可以在 route.params 中访问您的回调函数

function AddNotes( navigation, route ) 
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() 
    const  params:  addNote   = route;
    addNote( noteTitle, noteDescription );
    navigation.goBack();
  

【讨论】:

以上是关于如何在这个简单的代码中从导航反应 4 升级到导航 5的主要内容,如果未能解决你的问题,请参考以下文章

我们如何在 GWT 中从一页导航到另一页

如何在ios中从一个视图导航到另一个视图?

在 ionic 4 中从单页视图导航到侧面菜单布局

从窗口组件反应导航全屏模式

如何在反应原生 Firebase 动态链接中从收到的链接中提取参数?

反应原生导航在屏幕之间移动