将参数从 SignedOut 堆栈传递到 SignedIn 堆栈

Question

我在深度链接方面遇到了麻烦，特别是在能够为登录屏幕渲染堆栈内的特定屏幕时。我希望深层链接弹出一个屏幕，让我将联系人添加到用户的联系人列表中，然后导航回主页。但是，深层链接只会链接到

SignedOut

堆栈中的屏幕，因为

signedIn

状态变量默认为 false。这是我的 App.js:

export default function App({ navigation, route }) {
    const [user, setUser] = useState(null);
    const [wallet, setWallet] = useState(null);
    const [auth, setAuth] = useState(null);
    const w = { wallet, setWallet };
    const u = { user, setUser };
    const a = { auth, setAuth };
    const [signedIn, setSignedIn] = useState(false);
    useEffect(() => {
        async function set() {
            const s = await isSignedIn();
            setSignedIn(s);
        }
        set();
    }, [auth]);
    useEffect(() => {
        async function get() {
            if (wallet === null) {
                const found = await getConnectedWallet();
                if (found !== null) setWallet(found);
            }
        }
        get();
    }, [auth]);

    useEffect(() => {
        async function get() {
            console.log("Set user was called!");
            if (user === null) {
                const found = await getUser();
                console.log("Found user: ", found);
                if (found !== null) {
                    console.log("Set user!");
                    setUser(found);
                }
            }
        }
        get();
    }, [auth, user]);
    const linking = {
        prefixes: ["myapp://"],
        config: {
            screens: {
                
                SignedOut: {
                    screens: {
                        AddConnection: {
                            path: "adduser/:address/:name/:command?",
                            parse: {
                                address: (address) => `${address}`,
                                command: (command) => `${command}`,
                                name: (name) => `${name}`,
                            },
                        },
                    },
                },
                Settings: {
                    path: "settings",
                },
            },
        },
        getStateFromPath(path, options) {
            const state = getStateFromPath(path, options);
            const newState = {
                ...state,
                routes: state.routes.map((route) => {
                    const p = route.params;
                    if (p.command) {
                        const { command, ...withoutScreen } = p;
                        if (command === "a") {
                            return {
                                ...route,
                                params: {
                                    info: withoutScreen,
                                    next: "AddNewUser",
                                },
                            };
                        } else
                            return {
                                ...route,
                                params: {
                                    info: "nothing to see here",
                                },
                            };
                    }
                }),
            };
            return newState;
        },
    };
    return (
        <AuthContext.Provider value={a}>
            <UserContext.Provider value={u}>
                <WalletContext.Provider value={w}>
                    <NavigationContainer
                        linking={linking}
                        ref={navigationRef}
                        fallback={<Text>Loading...</Text>}
                    >
                        <Stack.Navigator>
                            {!signedIn ? (
                                <Stack.Screen
                                    name="SignedOut"
                                    component={SignedOutScreens}
                                    options={{ headerShown: false }}
                                />
                            ) : (
                                <Stack.Screen
                                    name="SignedIn"
                                    component={SignedInScreens}
                                    options={{ headerShown: false }}
                                />
                            )}
                        </Stack.Navigator>
                    </NavigationContainer>
                </WalletContext.Provider>
            </UserContext.Provider>
        </AuthContext.Provider>
    );
}

myapp://adduser/address/name/a

的深层链接只会让我导航到

SignedOut

堆栈中的屏幕，正如我之前所说，但令人烦恼的是，一旦启动画面呈现，它就会自动进行身份验证，因此一切都需要在

getStateFromPath

，但该函数只会设置

SignedOut

堆栈内的状态，并且一旦身份验证状态发生变化，

route.params

将不会转移。我有点迷失，感觉自己错过了一个大概念，因为做这件事不应该这么困难。预先感谢！

Answer 1

我会尝试这个：

// Introduce a "maybe signed in" state, in this case `null`
const [signedIn, setSignedIn] = useState(null);



// In render, wait for signedIn to be resolved ...
            <Stack.Navigator>
              {signedIn === null 
              ? <Text>Loading...</Text> 
              : !signedIn ? (
                <Stack.Screen
                  name="SignedOut"
                  component={SignedOutScreens}
                  options={{ headerShown: false }}
                />
              ) // ....