我有一個帶表格的螢屏。現在在該表單中有一個按鈕可以打開另一個螢屏，用戶在其中選擇目標選項，并在選擇后導航回原始表單（堆疊導航器），原因是用戶還可以在那里創建一個新選項，以便他們去與單獨編輯選項時相同的 UI（他們可以）。
我的解決方案下面的代碼有效，但我收到以下警告：
在導航狀態中發現了不可序列化的值。這可能會破壞使用，例如持久化和恢復狀態。如果您在引數中傳遞了不可序列化的值（例如函式、類實體等），則可能會發生這種情況。如果您需要在選項中使用帶有回呼的組件，則可以改用“navigation.setOptions”。有關更多詳細資訊，請參閱 https://reactnavigation.org/docs/5.x/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state 。
現在該鏈接建議使用setOptions但是更多的是像在標題中添加一個按鈕，但情況并非如此，用戶通過單擊選項在目標螢屏中選擇該選項。
以下是代碼的重要部分：
// 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
有沒有更好的方法如何將回呼發送到另一個螢屏？
uj5u.com熱心網友回復：
不建議通過route params. 從你的代碼和你想要的解釋來看pass data back to the screen on goBack。
而不是做
route.params.onGoBack(item);
return navigation.goBack();
我們可以將其路由引數傳遞item回并直接在a中設定狀態。這使我們不必在路由引數中傳遞函式。相反，我們直接在表單中設定狀態。MainFormScreennavigation.goBack()MainFormScreenuseEffect
OptionsScreengoBack我們可以navigate像往常一樣使用并傳item回MainFormScreen
return navigation.navigate('MainFormScreen', { item: item })
MainFormScreen在這里，我們不再傳遞函式，而是對路由引數的更改做出反應。
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])
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442532.html
標籤：javascript 打字稿 反应式 反应原生导航