react-native - React 抽屉导航 v5x useNavigation() 与组件类

Question

我曾多次尝试在组件类中使用 useNavigation() 进行导航。但我不能，因为根据错误，我应该在主体函数内部使用此方法。我在 render() 方法中尝试过。这也没有帮助。如果有人知道的话你能帮我吗？

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

export default class MenuDrawer extends React.Component{

render(){

const  navigation  = useNavigation();
return(
    <View>
       <Button  onPress={()=>{navigation.navigate('detail')}}  />
   </View>
);

}
}

Answer 1

根据文档here ，您可以将组件包装在函数中来使用它

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

export default yourFunction(props) {
  const navigation = useNavigation();

  return <MenuDrawer navigation={navigation} />;
}

您的新MenuDrawer

export default class MenuDrawer extends React.Component {
  render(){
    const { navigation } = this.props;
      return(
        <View>
         <Button onPress={()=>{navigation.navigate('detail')}}  />
       </View>
    );
  }
}