React Navigation headerBackImage 不起作用

Question

我在 React Native 应用程序中使用 React Navigation 3.11，我想自定义堆栈导航中的后退按钮。在文档中它说：

标题背景图片

React 元素或组件以在标题的后退按钮中显示自定义图像。当一个组件被使用时，它在渲染时会收到一些 props (tintColor, title)。默认为带有 react-navigation/views/assets/back-icon.png 后退图像源的 Image 组件，这是平台的默认后退图标图像（iOS 上为 V 形，Android 上为箭头）。

这是我的配置：

let navigationRouteConfigMap : NavigationRouteConfigMap = {
      _main:
      {screen: page, navigationOptions: 
        { 
          [...]
          headerBackTitle: '',
          headerTruncatedBackTitle: '',
          headerBackImage: Images.backArrow,
        }
      }

    }
    let stackNavigatorConfig:StackNavigatorConfig = {
      headerBackTitleVisible: false
    }

    return createStackNavigator(navigationRouteConfigMap, stackNavigatorConfig)

我的配置中还有其他页面，所有页面都具有相同的共享导航选项和自定义标题背景图像。但是，在我的应用程序中，它呈现默认的后退箭头。（headerBackTitleVisible: false虽然有效）

我究竟做错了什么？

Answer 1

这也有效

headerBackImage: ()=>(<YourAsset />),

Answer 2

我使用的是实际图像（来自require()）而不是 React 元素。此外，出于某种原因，也没有为单个页面选择导航选项。我已经切换到<Image.../>并将我的对象设置为defaultNavigationOptionsinStackNavigatorConfig并且它起作用了。

Answer 3

即使您可以使用自定义组件，在我的例子中是 SVG 图标，看起来像这样：

<LoginSignUpNav.Screen
    name="Login"
    component={Login}
    options={{
      headerBackImage: () => <BackIcon width={25} height={25} />,
      headerTintColor: "black",
      headerTransparent: true,
      headerStyle: {
         backgroundColor: 'transparent',
      },
    }}
/>