如何在 React Native 的堆栈导航器中更改后退按钮图像？

Question

如何在 React Native 中更改后退按钮的图像？

我想将后退箭头改为 V 形。

Answer 1

在您的 StackNavigator 中，提供 screenOptions 属性并将 headerBackImageSource 设置为您想要的后退箭头图标或图像。

    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerBackImageSource: `...image source...`
      }}
    >

Answer 2

我处理堆栈导航器默认标题的方式是创建一个自定义标题。主堆栈中的每个组件都导出一个 back 方法，因此您可以使用它为您的自定义箭头创建事件侦听器，如下例所示。

主要组成部分：

function Home({ navigation }) {

  return(
    <>
       <CustomHeader
         title="Home Page"
         handleBack={() => {
           navigation.goBack()
         }}
       />  
    </>
  )
}

export default Home

自定义标题组件：

function CustomHeader(props) {
  const title = props.title

  const handleBack = () => {
    props.handleBack()
  }

  return(
    <View>
      <Pressable
        onPress={handleBack}
      >
        <Image
          source={backArrowIcon}
          resizeMode="contain"
        />
      </Pressable>
      <Text>
        {title}
      </Text>
    </View>
  )
}

export default CustomHeader

您只需要设置样式并导入所有组件，如 View、Text、CustomHeader 等。