使导航可用于 React Native 应用程序中的所有组件

Question

我在我的React Native 应用程序中使用React Navigation 5，我不太清楚如何使导航对所有组件都可用。我还想提一下，我的应用使用Redux 进行状态管理，但我没有将React Navigation 与Redux 集成——也许我应该！

我的App.js 呈现我的Navigator.js 组件，如下所示。顺便说一句，我的应用程序需要身份验证，并且导航器功能的关键功能之一是将未经身份验证的用户重定向到登录屏幕。

class Navigator extends Component {

   render() {
        return (
            <NavigationContainer>
                {
                   this.props.isAuthenticated
                   ? <MainMenuDrawer.Navigator drawerContent={(navigation) => <DrawerContent member={this.props.member} navigation={navigation} drawerActions={DrawerActions} handleClickLogOut={this.handleClickLogOut} />}>
                       <MainMenuDrawer.Screen name="Home" component={HomeStack} />
                       <MainMenuDrawer.Screen name="ToDoList" component={ToDoListStack} />
                     </MainMenuDrawer.Navigator>
                   : <SignInStack />
                }
            </NavigationContainer>
        );
      }
}

然后在我的HomeStack 中，我有我的Dashboard 组件，它恰好是一个需要访问navigation 的类组件。这是我的HomeStack：

const HomeStackNav = new createStackNavigator();

const HomeStack = () => {

   return(
      <HomeStackNav.Navigator screenOptions={{ headerShown: false }}>
         <HomeStackNav.Screen name="DashboardScreen" component={Dashboard} />
         <HomeStackNav.Screen name="SomeOtherScreen" component={SomeOtherComponent} />
      </HomeStackNav.Navigator>
   );
}

export default HomeStack;

说，我的Dashboard 组件如下所示。如何使 navigation 可用于此组件？

class Dashboard extends Component {

   handleNav() {

      // Need to use navigation here...
   }

   render() {
      return (
         <Text>Welcome to Dashboard</Text>
         <Button onPress={() => this.handleNav()}>Go somewhere</Button>
      );
   }
}

function mapStateToProps(state) {
    return {
        member: state.app.member
    };
}

function mapDispatchToProps(dispatch) {

    return {
        actions: bindActionCreators(appActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

我需要手动将navigation 传递给每个组件吗？这似乎太重复并且容易出错。如何使navigation 在我的整个应用中可用？

Answer 1

解决方案 1：

你可以使用useNavigation钩子作为功能组件

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


const navigation = useNavigation();

navigation.navigate("interests");
//or
navigation.push("interests");

解决方案 2：

您可以使用 HOC withNavigation 在类组件 Ref 的任何组件中的 props 中导航

您可以通过

安装@react-navigation/compat

yarn add @react-navigation/compat

你可以像下面这样导入

import { withNavigation } from '@react-navigation/compat';

你可以像下面这样使用withNavigation

export default withNavigation(Dashboard)

注意：然后您可以在仪表板组件中使用this.props.navigation