5

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

headerBackImage

反应元素或组件以在标题的后退按钮中显示自定义图像。当一个组件被使用时，它在渲染时会收到一些道具（tintColor, title）。默认为带有 react-navigation/views/assets/back-icon.png 后退图像源的 Image 组件，这是平台的默认后退图标图像（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虽然确实有效）

我究竟做错了什么？

4

5 回答 5

7

这也有效

headerBackImage: ()=>(<YourAsset />),
于 2020-02-27T05:45:04.463 回答
5

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

于 2019-06-06T10:47:23.507 回答
4

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

<LoginSignUpNav.Screen
    name="Login"
    component={Login}
    options={{
      headerBackImage: () => <BackIcon width={25} height={25} />,
      headerTintColor: "black",
      headerTransparent: true,
      headerStyle: {
         backgroundColor: 'transparent',
      },
    }}
/>
于 2020-09-10T20:37:23.130 回答
0

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

headerRight: (props) => (
      <Button
      {...props}
      onPress={() => { /*Do something */ }}
       />
  ),
于 2021-05-21T19:34:42.503 回答
0

这可能是因为您使用的是 Navigation 6.XX。要在 6.XX 中工作，试试这个

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

这应该可以正常工作。

于 2022-02-23T05:53:47.167 回答