React Navigation headerBackImage не работает

Я использую React Navigation 3.11 в своем приложении React Native и хочу настроить кнопку «Назад» в навигации по стеку. В документах говорится:

headerBackImage

React Element или Component для отображения пользовательского изображения в кнопке возврата заголовка. Когда компонент используется, он получает ряд свойств при рендеринге (tintColor, title). По умолчанию используется компонент Image с источником изображения response-navigation / views / assets / back-icon.png, который является изображением значка возврата по умолчанию для платформы (шеврон на iOS и стрелка на 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
person Can Poyrazoğlu    schedule 06.06.2019    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Я использовал реальное изображение (из require()) вместо элемента React. Кроме того, по какой-то причине не были подобраны параметры навигации для отдельных страниц. Я переключился на <Image.../> и установил свой объект как defaultNavigationOptions в StackNavigatorConfig, и это сработало.

person Can Poyrazoğlu    schedule 06.06.2019

arrow_upward
5
arrow_downward

это тоже работает

headerBackImage: ()=>(<YourAsset />),
person Jimmy Sorza    schedule 27.02.2020
comment
Спасибо. это решило проблему для меня. очень просто и понятно. - person Beep Boop; 01.06.2020

arrow_upward
2
arrow_downward

Даже вы можете использовать собственный компонент, в моем случае значок SVG, выглядит примерно так:

<LoginSignUpNav.Screen
    name="Login"
    component={Login}
    options={{
      headerBackImage: () => <BackIcon width={25} height={25} />,
      headerTintColor: "black",
      headerTransparent: true,
      headerStyle: {
         backgroundColor: 'transparent',
      },
    }}
/>
person Darío Gutiérrez    schedule 10.09.2020

arrow_upward
0
arrow_downward

Вы можете создать свою собственную кнопку с изображением

headerRight: (props) => (
      <Button
      {...props}
      onPress={() => { /*Do something */ }}
       />
  ),
person Morris S    schedule 21.05.2021