从React-Navigation PKG投掷错误，问题主体中的theagernavigator中呼叫Usenavigation钩子。

Question

我正在学习反应和反应的最后4天，因为需要构建移动应用程序，并在编码 react-native-native 应用程序时遇到以下问题：
经过一番研究，我找到了一种在汉堡按钮之后嵌入绘制杆的顶部栏内的方法，并且有效。
当我尝试将警报替换为usenavigation（）。导航（'login'）;从内部的属性中替换警报时，问题出现了。

我想在导航的触摸可触摸性上镜像菜单项的行为。

 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem., js engine: hermes
info Reloading app...

完整的来源如下：

import * as React from 'react';
import { Button, Image, StyleSheet, Text, TouchableOpacity, View, Alert  } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
// https://reactnavigation.org/docs/use-navigation/
import { useNavigation } from '@react-navigation/native';

const getScreenCtx = content => {
  return (<View style={stl.boxCtx}>{content}</View>);
}

const Home = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Home</Text>) );
}
const Login = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Login</Text>) );
}
const Logout = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Logout</Text>) );
}

const navToLogin = () => {
  useNavigation().navigate('Login');
}

const NestedTabBar = props => {
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          //Alert.alert('NavigateToLogin');
          navToLogin();
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}

const ContentTopWideHamburgBar = props => {
  return <NestedTabBar />;// <Text style={stl.hamburgBar}>ContentTopHamburgBar</Text>
}
const ContentColapsibleSideBarMenuHeader = props => {
  return <Text style={stl.sideMenuHeader}>SideBarMenuHeader</Text>
}
const ContentColapsibleSideBarMenuFooter = props => {
  return <Text style={stl.sideMenuFooter}>SideBarMenuFooter</Text>
}

const ContentColapsibleSideBarMenu = props => {
  return (
    <View style={stl.sideBarMenu}>
      <DrawerContentScrollView {...props}>
        <ContentColapsibleSideBarMenuHeader/>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <ContentColapsibleSideBarMenuFooter/>
    </View>
  );
}

const Drawer = createDrawerNavigator();

const ContentItensNavigationRouteMap = () => {
  return (
    <>
      <Drawer.Screen component={Home} name='Home' />
      <Drawer.Screen component={Login} name='Login' />
      <Drawer.Screen component={Logout} name='Logout' />
    </>
  );
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
        screenOptions={
          {
            headerStyle: { backgroundColor: 'magenta', },
            headerTintColor: 'white', // hamburg color
            headerTitleStyle: { fontWeight: 'bold', },
            headerTitle: (props) => <ContentTopWideHamburgBar {...props} />
          }
        }
        contentOptions={
          {
            activeTintColor: 'red',
            activeBackgroundColor: 'red',
            inactiveTintColor: 'red',
            inactiveBackgroundColor: 'red',
          }
        }
        drawerContent={props => <ContentColapsibleSideBarMenu {...props} />} >
          {ContentItensNavigationRouteMap()}
    </Drawer.Navigator>
  );
};

export default function ShellNavigator() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

const stl = StyleSheet.create({
  boxDescr: {
    fontSize: 30,
    margin: 10,
    padding:10,
    backgroundColor: 'lightblue',
    color: 'red',
  },
  boxCtx:{
    display: 'flex',
    flex: 1,
    fontSize: 30,
    margin: 0,
    backgroundColor: 'yellow',
  },
  hamburgBar: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'pink',
  },
  sideMenuHeader: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'blueviolet',
  },
  sideMenuFooter: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'purple',
  },
  sideBarMenu: {
    flex: 1,
    fontSize: 20,
    margin: 10,
    backgroundColor: 'greenyellow',
  },
  itemNav: {
    fontSize: 40,
    padding: 10,
    backgroundColor: 'red',
  },
});

Answer 1

这里navtologin是一个独立的功能，而不是功能组件。钩子需要在功能组件中使用。波纹管代码应起作用，navtologin将功能移入功能组件中。

const NestedTabBar = props => {
  const navigation = useNavigation();

  const navToLogin = () => {
    navigation.navigate('Login');
  }
  
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          //Alert.alert('NavigateToLogin');
          navToLogin();
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}