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

【问题标题】：How to use navigation using functional component - react native如何使用功能组件使用导航 - 反应原生
【发布时间】：2021-06-14 21:56:27
【问题描述】：

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

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>
    )
}

【问题讨论】：

如果您尝试使用导航的组件是子组件，则必须将导航作为父组件的道具传递
@nazmul 如何传递道具。
如果父类是功能组件，如果是类组件可以接受在子组件中作为任何其他道具。

标签： reactjs react-native navigation

【解决方案1】：

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

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

在我的功能组件中

常量导航 = useNavigation()

像这样：

【讨论】：