React Native自定义返回按钮navigation.goBack()函数失效如何解决？

问题核心是自定义按钮组件未获取到有效的navigation实例——默认返回按钮会自动关联当前页面的navigation对象，而你的自定义按钮没有正确拿到这个对象，导致goBack()调用无效。

有两种可行的解决方式：

方式一：在headerLeft中传递navigation给自定义按钮 #

修改Options.tsx里的onBoardingChooseAliasScreen配置，将headerLeft回调自带的navigation参数传递给CustomBackButton：

const onBoardingChooseAliasScreen: NativeStackNavigationOptions = {
  headerLeft: ({ navigation }) => <CustomBackButton navigation={navigation} />
}

修改后，CustomBackButton组件就能接收到正确的navigation对象，调用goBack()即可正常触发返回逻辑。

方式二：在自定义按钮内部使用useNavigation钩子 #

无需手动传递navigation，直接在CustomBackButton.tsx中通过useNavigation钩子获取导航实例：

import React from 'react'
import styled from 'styled-components/native'
import SVGimg from 'src/shared/images/greenMarker.svg'
import { useNavigation } from '@react-navigation/native'

export const CustomBackButton: React.FC = () => {
  const navigation = useNavigation()
  return (
    <Wrapper onPress={() => navigation.goBack()}>
      <SVGimg />
    </Wrapper>
  )
}

const Wrapper = styled.Pressable``

这种方式更简洁，组件无需依赖父组件传递props，可自行从导航上下文获取实例。

内容的提问来源于stack exchange，提问作者Arasto