react-native - 如何从 React Native 中的自定义组件内部导航回父页面

Question

大家好，我正在编写一个 React Native 应用程序并且偶然发现了一些有趣的东西。

这是我的代码的简化版本：

//import statements
...

const Profile = (props) => {
    return(
       <Text>Hey {props.name}!</Text>
       <TouchableOpacity onPress={() => navigation.goBack();}>Go back</TouchableOpacity>
);}

export function ScreenOne({ navigation }) {
    <Profile name="HUFF">
}
export function ScreenTwo({ navigation }) {
    //blah blah blah
}

export default function App(){
    //rest of the code
    ...
}

所以基本上，我正在尝试使用 react-navigation 在我的应用程序的屏幕之间导航。但是我的组件内部的按钮Profile不起作用。

考虑到我从到导航ScreenTwo到ScreenOne

提前致谢。

标签： react-nativereact-navigation

Answer 1

React 导航有useNavigation钩子

import { useNavigation } from '@react-navigation/native'
// if you are not using react-navigation 5 or 6
// then there is package https://github.com/react-navigation/hooks

const Profile = (props) => {
    const navigation = useNavigation();
    return(
       <Text>Hey {props.name}!</Text>
       <TouchableOpacity onPress={() => navigation.goBack()}>Go back</TouchableOpacity>
    );
}