反应导航 headerBackImage 不起作用答案

【问题标题】：React Navigation headerBackImage not working反应导航 headerBackImage 不起作用
【发布时间】：2019-10-21 20:57:32
【问题描述】：

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

headerBackImage

React 元素或组件在标题的背面显示自定义图像按钮。当一个组件被使用时，它会收到一些 props 渲染（tintColor，标题）。默认为 Image 组件 react-navigation/views/assets/back-icon.png 返回图源，其中是平台的默认后退图标图像（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 确实有效）

我做错了什么？

【问题讨论】：

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

这个也可以

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

【讨论】：

谢谢。这个为我解决了这个问题。非常简单直接。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以使用图像创建自己的按钮

headerRight: (props) => (
      <Button
      {...props}
      onPress={() => { /*Do something */ }}
       />
  ),

【讨论】：