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

Question

我正在尝试在 React Navigation 的标题中显示一个 FontAwesome 图标，而不是默认的 V 形图标。

我试图覆盖 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} />
  ),
};

这里是 slack demo