Question

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

App.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>
    );
}

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>
    );
}

Answer 2

我发现的一个技巧是用 props 打印 console.log 并找到对象内部的函数。

所以我所做的是将 initialparams 的名称从 Profile、navigation 更改为 parentNaivgation。并且还移除了 Profile 组件中的 ({navigation}) 到 (props)。

最后找到功能导航的路径是props.route.params.parentNavigation.navigate("SignIn")

从子导航转到父导航

2 个答案: