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

【问题标题】：Navigate to other StackNavigator screen when press button on navbar按下导航栏上的按钮时导航到其他 StackNavigator 屏幕
【发布时间】：2021-02-15 02:16:37
【问题描述】：

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

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

我的想法是我无法从此堆栈导航栏重定向到 Profile，因为 Profile 仍被定义，但我不知道另一种方法。

// 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;

我将不胜感激。

【问题讨论】：

标签： react-native react-redux react-native-navigation stack-navigator

【解决方案1】：

您可以在下面的选项中访问“导航”

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

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

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 函数，以便它根据需要进行导航。

【讨论】：

像魅力一样工作！不知道我可以从选项中访问它。谢谢！ :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

例如

先导入钩子，

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

【讨论】：