react-native - 如何使用自己的导航堆栈关闭模态打开的窗口？

Question

我的 React Native 项目中有以下结构，由这个答案建议：

export const Root = () => {
    const RootStack = useMemo(() => createStackNavigator(), []);
    const HomeStack = useMemo(() => createStackNavigator(), []);

    function renderHomeStack() {
        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name="Home" component={HomeScreen} />
                <HomeStack.Screen name="Settings" component={SettingsScreen} />
            </HomeStack.Navigator>
        );
    }

    function renderRootStack() {
        return (
            <RootStack.Navigator>
                <RootStack.Screen name="Login" component={LoginScreen} />
                <RootStack.Screen
                    name="HomeStack"
                    options={{
                        presentation: 'modal',
                    }}
                    component={renderHomeStack}
                />
            </RootStack.Navigator>
        );
    }

    return renderRootStack();
};

目前，我想从设置屏幕返回登录屏幕。

• 我尝试了这个问题下的解决方案，但没有奏效。

• 我还尝试使用DeviceEventEmitter向登录屏幕发送事件来调用 navigation.popToTop() 或 navigation.goBack() - 这也不起作用。

Answer 1

试试这个，你必须先通过父道具，

props.navigation.navigate("LoginScreen");

或者您可以使用 AuthContext 将其保存在一个位置并返回，

      const initialLoginstate = {
        isLoading: true,
        userName: null,
        userToken: null,
      };

      const loginReducer = (prevState, action) => {
        switch (action.type) {
    
          case "LOGOUT":
            return {
              ...prevState,
              userName: null,
              userToken: null,
              isLoading: false,
            };
        }
      };

 
    const [loginState, dispatch] = React.useReducer(
        loginReducer,
        initialLoginstate
      );

 const authContext = React.useMemo(
        () => ({
    signOut: async () => {
    
                try {
                  await AsyncStorage.removeItem("userToken");
                } catch (e) {
                  console.log(e);
                }
                dispatch({ type: "LOGOUT" });
        }),
        []
      );

Answer 2

尝试使用

 navigation.reset({
  index: 0,
  routes: [{ name: 'Login' }],
});