react-native - 从子导航转到父导航

Question

我有两个NavigationContainer。我想要的是当我在登录屏幕上时转到 MainPage。当我在 MainPage > Profile 中时，问题就出现了。Button注销不会进入登录屏幕。

应用程序.js

import React from "react";
import {SignIn} from './src/screen/authentication/signIn'
import {SignUp} from "./src/screen/authentication/signUp";
import {MainPage} from "./src/screen/drawer";
import {createStackNavigator} from "@react-navigation/stack";
import {NavigationContainer} from "@react-navigation/native";

const Stack = createStackNavigator();

class App extends React.Component {
    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator initialRouteName="SignIn" headerMode={null}>
                    <Stack.Screen name="SignIn" component={SignIn} />
                    <Stack.Screen name="SignUp" component={SignUp} />
                    <Stack.Screen name="Home" component={MainPage} />
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
}

抽屉.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {Dashboard} from "./dashboard/dashboard";
import {AddWidget} from "./addWidget/addWidget";
import {Profile} from "./profile/profile";

const Drawer = createDrawerNavigator();

export function MainPage({navigation}) {
    return(
    <NavigationContainer independent={true}>
            <Drawer.Navigator>
                <Drawer.Screen name="Dashboard" component={Dashboard} />
                <Drawer.Screen name="Add widget" component={AddWidget} />
                <Drawer.Screen name="Profile" component={Profile} initialParams={{navigation: () => navigation.navigate('SignIn')}} />
            </Drawer.Navigator>
    </NavigationContainer>
    );
}

Profile.js

import * as React from 'react';
import {Button, Text, View} from "react-native";
import {useHistory} from "react-router-dom";
import {styles} from "./styles"

export function Profile({navigation}) {
    const history = useHistory();
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.title}>Username</Text>
            <Button title="Logout" onPress={() => navigation.navigation} />
        </View>
    );
}

标签： react-nativereact-navigation

Answer 1

你应该能够做到这一点：

        <Button title="Logout" onPress={() => navigation.navigate("SignIn")} />

如果上述方法不起作用，您可以尝试以下操作：

import * as React from 'react';
import {Button, Text, View} from "react-native";
import {useHistory} from "react-router-dom";
import { useNavigation } from '@react-navigation/native';
import {styles} from "./styles"

export function Profile() {
    const history = useHistory();
    const navigation = useNavigation();
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.title}>Username</Text>
            <Button title="Logout" onPress={() => navigation.navigate("SignIn")} />
        </View>
    );
}