React导航堆栈导航器禁用返回功能

ha5z0ras  于 2023-03-19  发布在  React
关注(0)|答案(2)|浏览(144)

如何禁用返回功能
我有一个功能组件

export default function App(){

createHomeStackNavigator = () =>
    <Stack.Navigator screenOptions={{
                        headerShown: false
    }}>
        <Stack.Screen
            name="Login"
            component={Login}
        />
        <Stack.Screen
            name="Home"
            children={createHomeTabNavigator}
        />
    </Stack.Navigator>
return(
    <NavigationContainer>
        {createHomeStackNavigator()}
    </NavigationContainer>
)

当用户转到主页时,其登录组件上的onclick,然后他无法通过iOS上的任何滑动、Android上的后退按钮和其他方式返回登录

cclgggtu

cclgggtu1#

也许您应该使用navigation.reset();

jjhzyzn0

jjhzyzn02#

设置StackNavigatorParams时,为Login屏幕设置redirect参数

import { createStackNavigator} from "@react-navigation/stack";

export type StackNavigatorParams = {
    Home: undefined;
    Settings: undefined;
    Login: { redirect: keyof StackNavigatorParams } | undefined;
};

const Stack = createStackNavigator<StackNavigatorParams>();

现在,在loginHandler中,当用户按LoginButton时,您可以设置redirect参数。当堆栈导航器检测到重定向到“登录”页面时,它会将用户重定向到“主页”屏幕

export default function Login({ navigation, route }: LoginProps): ReactElement {
    const [formState, setFormState] = useState({
        username: "username",
        password: ""
    });

    const redirect = route.params?.redirect;

    const login = async () => {
        const { username, password } = formState;
        try {
            await yourSignInFunction(username, password);
            // "replace", if we go back, we go back to "Home" not to Login
            redirect ? navigation.replace(redirect) : navigation.navigate("Home");
        } catch (e) {}
    };

    return <Button onPress={login} />;
}

相关问题