Как передать функцию на другой экран в react native?

Question

[leham1]

Здравствуйте. Я передаю функцию на другой экран через props. Но мне выдается предупреждение. Как я могу передать функцию правильно, чтобы не было предупреждения?
Функцию я передаю вот так (функция change_item_of_list_DATA):

onPress={() => navigation.navigate('Screen_3', {item: item, func1: change_item_of_list_DATA})}

Это предупреждение выдается:

Non-serializable values were found in the navigation state. Check:

Screen_3 > params["func1"] (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.
at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\@react-navigation\native\node_modules\@react-navigation\core\src\BaseNavigationContainer.tsx:348:14 in React.useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15561:31 in commitHookEffectListMount
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15618:35 in commitPassiveHookEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18795:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18647:29 in scheduleCallback$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:597:41 in workLoop
at node_modules\scheduler\cjs\scheduler.development.js:552:23 in flushWork
at node_modules\scheduler\cjs\scheduler.development.js:42:17 in _flushCallback
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

Answer 1

[Alexandroppolus]

В общем случае - никак.
Если твоя функция не содержит замыканий и ничего не биндит, а зависит только от параметров и общедоступных глобальных значений, то можно сериализовать её в строку, передать эту строку на другой экран, а там разобрать

function func(a) { console.log('***', a); }
const funcStr = func.toString();
...
const parsedFunc = Function('return ' + funcStr)();
parsedFunc(12); // в консоли: *** 12

Ну а если ты создал функцию, которая содержит замыкания на какие-то значения, то эти значения надо передавать отдельными пропсами. Функцию сериализовать не получится (вернее, не получится обратно спарсить), да и вообще, скорее всего, на самом деле окажется правильнее её заимпортить. Трюк с передачей функции актуален, если в зависимости от каких-то данных ты хочешь передать именно какой-то алгоритм

Comments

[leham1]

Спасибо большое за ответ