如何处理 AppStack 版本 4.0 ( headerLeft ) 中的后退按钮功能？

Question

页面 app js
反应：挂钩导航：版本 4
backLeft 错误 ReferenceError：找不到变量：导航
我想回到上一画面但是back()函数不起作用
无法识别导航和返回功能。

import Info from "./Screens/Info";
import Note from "./Screens/Note";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
function App() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark" />
      <AppContainer />
      <View>
      </View>
    </SafeAreaView>
  );
}

const AppStack = createStackNavigator(
  {
    Start: {
      screen: Start,
      navigationOptions: {
        title: '',
      },
      params: { user: 'me' },
    },

    Info: {
      screen: Info,
      navigationOptions: { title: 'الصفحة الرئيسية' },
    },
    Guide: {
      screen: Guide,
      navigationOptions: { title: 'دليل الصيانة' },
    },
    Note: {
      screen: Note,
      navigationOptions: {
        title: 'المذكرة',
// **the error is here ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇❌❌❌❌❌❌**
        headerLeft: () => <TouchableOpacity onPress={() => { goBack() }} ><Text style={{ color: '#fff' }}>back</Text></TouchableOpacity>
      },
    },

  },
  {
    initialRouteName: "Start",
  
  
   
    },

  }
);

export default createAppContainer(AppStack);

Answer 1

试试这个：

Note: {
  screen: Note,
  navigationOptions: ({ navigation }) => ({
    title: 'المذكرة',
    headerLeft: () => <TouchableOpacity onPress={() => { navigation.goBack() }} ><Text style={{ color: '#fff' }}>back</Text></TouchableOpacity>
  }),
},

您可以访问 navigationOptions 中的 navigation 对象，如上所示，然后它将用于导航路线。

如何处理 AppStack 版本 4.0 ( headerLeft ) 中的后退按钮功能？

how to handle back button function in AppStack version 4.0 ( headerLeft )?

navigation

reactjs

react-native

react-hooks