useNavigation
useNavigation
是一个钩子,它提供对 navigation
对象的访问。当您无法直接将 navigation
属性传递到组件中,或者不想在深度嵌套的子组件中传递它时,它很有用。
useNavigation()
返回它所在的屏幕的 navigation
属性。
示例
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
有关更多信息,请参阅 navigation
属性 的文档。
与类组件一起使用
您可以将类组件包装在函数组件中以使用钩子
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} />;
}