如何使用功能组件使用导航 - 反应原生

Question

我如何使用类组件使用导航，我当前在我的应用程序上的屏幕是功能组件，这就是我能够从一个页面导航到另一个页面的方式，但是如果尝试使用功能组件来实现这一点它不起作用。

export default function Activity({navigation}) {
    return (
        <View style={styles.MainContainer}>
            <TouchableOpacity onPress={() => navigation.navigate("Home")}> 
     
            </TouchableOpacity>
        </View>
    )
}

我如何在这里实现：/ 我试过了

<块引用>

this.props.navigation.navigate('Home')

我收到以下错误/警告

<块引用>

无法在渲染不同组件时更新组件

export default class App extends React.Component {
     render() {
        return (
            <View style={styles.MainContainer}>
            <TouchableOpacity onPress={() => navigation.navigate("Home")}> 
     
            </TouchableOpacity>
        </View>
    )
}

Answer 1

为了我的导航，我不得不在文件的开头添加这个导入

从 '@react-navigation/native' 导入 { useNavigation }

在我的功能组件中

const 导航 = useNavigation()

像这样：