按下导航栏上的按钮时导航到其他 StackNavigator 屏幕

Question

我对反应还很陌生，这是我的第一个应用程序。

我现在有一个带有 2 个屏幕的堆栈导航器：MainMenu 和 Profile。当用户在 MainMenu 中时，右上角会显示一个按钮，按下此按钮时我需要将用户重定向到配置文件屏幕。我需要 this.props.navigation.navigate('Profile') 之类的东西，但这不起作用，因为未定义 this、props 和 navigation。

我的想法是我不能从这个堆栈导航栏重定向到配置文件，因为配置文件仍然定义，但我不知道另一种方法。

// mainStack.js
import React from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MainMenu from '../../screens/home/mainMenu';
import Profile from '../../containers/profileContainer';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useSelector } from 'react-redux';


const MainStack = () => {
    const Stack = createStackNavigator();
    const isAdmin = (useSelector(state => state.auth.user.role) === 'admin');

    function renderUserMenu() {
        return (
            <TouchableOpacity style={{ marginRight: 20 }} onPress={() => console.log("HERE I NEED TO REDIRECT TO THE SCREEN PROFILE") } >
                <Icon style={{ color: 'white' }} name='user-circle-o' size={30} />
            </TouchableOpacity>
        )
    }

    function LogoTitle() {
        return (
            <Image
                style={{ width: 150, height: 50 }}
                source={require('../../assets/logo-with-slogan.png')}
            />
        );
    }

    function renderConfigBtn(_isAdmin) {
        if (!_isAdmin) {
            return (
                <TouchableOpacity style={{ marginRight: 10 }} onPress={() => console.log('Configuraciones')} >
                    <Icon style={{ color: 'white' }} name='cog' size={30} />
                </TouchableOpacity>
            )
        }
    }

    return (
        <Stack.Navigator>
            <Stack.Screen
                name="MainMenu"
                component={MainMenu}
                options={{
                    headerTitle: props => <LogoTitle {...props} />,
                    headerRight: () => (
                        <View style={{ flexDirection: 'row' }}>
                            {renderConfigBtn(isAdmin)}
                            {renderUserMenu()}
                        </View>
                    ),
                    headerStyle: { backgroundColor: '#0064c8' },
                }}
            />
            <Stack.Screen
                name="Profile"
                component={Profile}
                options={{
                    headerStyle: { backgroundColor: '#0064c8' },
                }}
            />
        </Stack.Navigator>
    )
}

export default MainStack;

此外，此堆栈位于导航容器内，如下所示：

import React from 'react';
import { useSelector } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";

import AuthStack from "./authStack";
import MainStack from "./mainStack";

const AppNavigator = props => {
    const isAuth = useSelector(state => !!state.auth.access_token);

    return (
        <NavigationContainer>
            { !isAuth && <AuthStack/>}
            { isAuth && <MainStack/>}
        </NavigationContainer>
    );
};

export default AppNavigator;

如有任何帮助，我将不胜感激。

Answer 1

您可以在如下选项中访问 'navigation'

   options={({navigation})=>({
                    headerTitle: props => <LogoTitle {...props} />,
                    headerRight: () => (
                        <View style={{ flexDirection: 'row' }}>
                            {renderConfigBtn(isAdmin,navigation)}
                            {renderUserMenu(navigation)}
                        </View>
                    ),
                    headerStyle: { backgroundColor: '#0064c8' },
                })}

基本上你可以将函数作为 prop 传递给选项，导航将作为参数传递给它。

function renderUserMenu(navigation) {
        return (
            <TouchableOpacity style={{ marginRight: 20 }} onPress={() => navigation.navigate('YOUR SCREEN') } >
                <Icon style={{ color: 'white' }} name='user-circle-o' size={30} />
            </TouchableOpacity>
        )
}

并且您可以像上面那样更改 renderUserMenu 函数，以便它根据需要进行导航。

Answer 2

使用导航选项，然后将其传递给函数以导航到配置文件：

  <Stack.Screen
            name="MainMenu"
            component={MainMenu}
            options={({ navigation }) => ({ ......

Answer 3

我们只需从 react-navigation/native 包中导入 useNavigation 钩子，就可以使用这个钩子实现导航，而无需从组件中访问导航道具。

例如

先导入hook，

import { useNavigation } from '@react-navigation/native';

在MainStack.js中使用钩子实现导航如下：

const navigation = useNavigation();

function renderUserMenu() {
    return (
        <TouchableOpacity style={{ marginRight: 20 }} onPress={() => navigation.navigate("Profile") } >
            <Icon style={{ color: 'white' }} name='user-circle-o' size={30} />
        </TouchableOpacity>
    )
}

按下导航栏上的按钮时导航到其他 StackNavigator 屏幕

Navigate to other StackNavigator screen when press button on navbar

react-native

react-redux

react-native-navigation

stack-navigator