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

Question

我正在React Navigation 5应用程序中使用React Native，但我不清楚如何使导航可用于所有组件。我还想提到我的应用程序使用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

您可以使用HOC withNavigation来导航任何组件Ref中的道具>

您可以通过]安装[C0

@react-navigation/compat
您可以按如下所示导入

yarn add @react-navigation/compat
您可以像下面一样使用import { withNavigation } from '@react-navigation/compat';

withNavigation
[注意：

然后您可以在仪表板组件中使用export default withNavigation(Dashboard)