如何在 React Navigation 中返回堆栈导航？

Question

我在 createStackNavigator 中创建了一个名为 UpdatePlace 的导航

默认情况下，当单击 headerback 图标时，导航会返回到上一个组件。

但是，当我在使用 headerLeft 应用我自己的自定义 HeaderLeft 图标后按下按钮时，它不会返回 go。 这个时候我该怎么办？

这是我的代码

const RootStack = createStackNavigator();

        <RootStack.Navigator screenOptions={{ headerShown: false }}>
        <RootStack.Screen name="UpdatePlace" component={UpdatePlace}
                options={{
                    headerShown: true,
                    headerTitle: "Hello",
                    headerTitleAlign: 'center',

                    headerLeft: () => (
                        <Pressable style={{ width: '100%', height: '80%' }}>
                            <Image source={cusImage.Arrow} style={{ width: '40%', height: '70%', resizeMode: 'contain' }}

                            />
                        </Pressable>
                    ),
                }}
            />
        </RootStack.Navigator>

Answer 1

您还需要将点击操作添加到您的自定义元素

headerLeft: ({ navigation }) => (
  <Pressable onPress={() => navigation.goBack()} style={{ width: '100%', height: '80%' }}>
      <Image source={cusImage.Arrow} style={{ width: '40%', height: '70%', resizeMode: 'contain' }} />
  </Pressable>
)