Tengo una pantalla con forma. Ahora, en ese formulario, hay un botón que abre otra pantalla en la que el usuario selecciona la opción de destino y, tras la selección, vuelve al formulario original (navegador de pila), el razonamiento es que el usuario también puede crear una nueva opción allí para ir a la misma interfaz de usuario que tendrían si editaran las opciones por separado (lo que pueden hacer).
Mi código debajo de la solución funciona, pero recibo la siguiente advertencia:
Se encontraron valores no serializables en el estado de navegación. Esto puede interrumpir el uso, como la persistencia y la restauración del estado. Esto podría suceder si pasó valores no serializables como función, instancias de clase, etc. en params. Si necesita usar componentes con devoluciones de llamada en sus opciones, puede usar 'navigation.setOptions' en su lugar. Consulte https://reactnavigation.org/docs/5.x/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state para obtener más detalles.
Ahora que el enlace sugiere usar setOptions sin embargo, eso es más como agregar un botón al encabezado, que no es el caso, el usuario selecciona la opción en la pantalla de destino haciendo clic en la opción.
Aquí hay partes importantes del código:
// MAIN FORM SCREEN <Button title={"Some Title"} onPress={openSelectItem}></Button> const openSelectFish = () => { return navigation.navigate("ItemList", { sendItemBack: true, onGoBack: onSelectItem }); }; const onSelectItem = (item: ItemDTO) => { setItem(item.name); // basic useState }; // THE OPTIONS SCREEN const onChooseItem = (item: ItemDTO) => { console.log(this); if ((typeof route !== "object") || (typeof route.params !== "object")) return; if (!route.params.sendItemBack ?? true) return; route.params.onGoBack(item); return navigation.goBack(); }; // onChooseItem is then used in onPress of each option¿Hay una mejor manera de enviar una devolución de llamada a la otra pantalla?
No se recomienda pasar una función de devolución de llamada a través de los route params . A juzgar por su código y su explicación, en realidad desea pass data back to the screen on goBack .
en lugar de hacer
route.params.onGoBack(item); return navigation.goBack(); podríamos simplemente devolver el item a MainFormScreen en sus parámetros de ruta en navigation.goBack() y establecer el estado directamente en MainFormScreen en un useEffect . Esto evita que tengamos que pasar una función en los parámetros de ruta. En su lugar, establecemos el estado directamente en el formulario.
OptionsScreen En lugar de llamar a goBack , podemos navigate como de costumbre y pasar item de vuelta a MainFormScreen
return navigation.navigate('MainFormScreen', { item: item })MainFormScreen Aquí, ya no pasamos una función, sino que reaccionamos a los cambios de parámetros de ruta.
const openSelectFish = () => { return navigation.navigate("ItemList", { sendItemBack: true }); }; const params = useMemo(() => route.params || {}, [route.params]) const [item, setItem] = useState() const onSelectItem = useCallback((item: ItemDTO) => { setItem(item.name); // basic useState }, [setItem]); useEffect(() => { onSelectItem(params.item) }, [params, onSelectItem])