反应导航 goBack()答案

【问题标题】：React Navigation goBack()反应导航 goBack()
【发布时间】：2020-07-17 09:43:08
【问题描述】：

当我在反应导航的功能组件中使用 goBack(null) 方法时遇到一些错误

function Header({ titleText, navigation}) {
return (
  <Appbar.Header style={styles.headerContainer}>
    <Appbar.BackAction style={styles.backButton} onPress={() => navigation.goBack(null)} >
     <Text style={styles.back}></Text>
    </Appbar.BackAction>
   <View style={styles.container}>
     <Title style={styles.title}>{titleText}</Title>
   </View>
 </Appbar.Header>
 )}

【问题讨论】：

error 消息是什么？
TypeError: undefined is not an object (evalating 'navigation.goBack')
这意味着你在第一个屏幕上，所以没有创建 goBack()，尝试更新你的 onPress 类似 onPress={()=>navigation.goBack && navigation.goBack(null)}

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

尝试使用来自@react-navigation/native 的useNavigation 钩子

import * as React from 'react';
import { Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyText() {
  const navigation = useNavigation();

  return <Text onPress={() => navigation.goBack()}>Go Back</Text>;
}

【讨论】：

@react-navigation/native 这支持 react navigation version-5 但我使用的是 version-4