如何在 React Navigation 中使用图标代替原来的后退按钮？

Question

我正在尝试在 React Navigation 的 header 中显示 FontAwesome 图标而不是默认的人字形图标。

我试图覆盖 screenOptions 中的 headerLeft 属性，但后退按钮一直显示，并且无法返回到上一屏幕。我只想保留原来的后退按钮行为（仅在嵌套屏幕上显示），但带有自定义图标。

我想到了这个（当然行不通）：

const Stack = createStackNavigator();

const screenOptions = {
  headerBackTitleVisible: false,
  headerBackImageSource: () => (
    <FontAwesomeIcon icon={faArrowAltCircleLeft} color="#fff" size={24} />
  ),
};

export const CategoriesStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptions}>
      <Stack.Screen name={Routes.Categories} component={Categories} />
      <Stack.Screen
        name={Routes.Category}
        component={Category}
        options={({ route }) => ({ title: route.params.id })}
      />
      <Stack.Screen
        name={Routes.CategoryAbout}
        component={CategoryAbout}
        options={({ route }) => ({ title: route.params.category })}
      />
    </Stack.Navigator>
  );
};

文档在这个主题上有点不清楚，我在网上找不到很好的例子。任何帮助将不胜感激！

Answer 1

试试这个

const screenOptions = {
  headerBackImage: () => (
    <FontAwesomeIcon icon={faArrowAltCircleLeft} color="#fff" size={24} />
  ),
};

这里是松弛的demo

如何在 React Navigation 中使用图标代替原来的后退按钮？

How to use an icon instead of the original back button in React Navigation?

react-native

react-navigation