如何在 class 组件中使用 React Navigation useNavigation Hook？

Question

我是 react-native 的初学者。我如何在 React Class 组件中使用 useNavigation 挂钩？

Answer 1

From Documentation - 您可以将 class 组件包装在函数组件中以使用钩子：

class MyBackButton extends React.Component {
  render() {
    // Get it from props
    const { navigation } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const navigation = useNavigation();

  return <MyBackButton {...props} navigation={navigation} />;
}

Answer 2

useNavigation 是一个钩子，所以你应该在 functional component 中使用它。一个简单的例子如下：

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

const SomeButton = () => {
  const navigation = useNavigation();

  return ( 
    <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
    </TouchableOpacity>
  )
}

通常您使用 navigation 导航到任何其他 screen，当然它也支持很多其他高级功能

如何在 class 组件中使用 React Navigation useNavigation Hook？

How to use React Navigation useNavigation Hook in a class component?

react-native

react-navigation