反应导航 headerBackImage 不工作

Question

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

headerBackImage

React Element or Component to display custom image in header's back button. When a component is used, it receives a number of props when rendered (tintColor, title). Defaults to Image component with react-navigation/views/assets/back-icon.png back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android).

这是我的配置：

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

    }
    let stackNavigatorConfig:StackNavigatorConfig = {
      headerBackTitleVisible: false
    }

    return createStackNavigator(navigationRouteConfigMap, stackNavigatorConfig)

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

我做错了什么？

Answer 1

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

Answer 2

这个也行

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

Answer 3

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

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

Answer 4

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

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

Answer 5

可能是因为您正在使用导航6.XX。要在 6.XX 中使用它，试试这个

headerLeft: () => (
   <TouchableOpacity
      style={styles.headerBtnContainer}
      onPress={() => props.navigation.goBack()}
   >
     <Ionicons name="close-sharp" size={24} color="white" />
   </TouchableOpacity>
),

这应该可以正常工作。

反应导航 headerBackImage 不工作

React Navigation headerBackImage not working

react-native

react-navigation

react-navigation-stack