iOS15 中后退按钮的 headerTintColor 被忽略（react-navigation v5）

Posted 2023-03-15

【中文标题】iOS15 中后退按钮的 headerTintColor 被忽略（react-navigation v5）

【英文标题】：headerTintColor ignored for back button in iOS15 (react-navigation v5)

【发布时间】：2021-10-08 16:41:10

【问题描述】：

后退按钮的值 headerTintColor 在 ios 15 中被忽略，而是使用系统标准蓝色。 Title 和 Header Right 按钮仍然尊重我传入的值。我正在使用 react-navigation v5，如果可以避免的话，我现在正试图避免升级到 v6。 （而且我不知道这是否发生在 v6 中？）。这发生在设备和模拟器上。

iOS 15（通过模拟器）： screenshot from iOS 15 showing blue-colored back button

iOS screenshot from iOS 13 showing white colored back button

 <Stack.Navigator
      initialRouteName="EventList"
      screenOptions=gestureEnabled: true>
      <Stack.Screen
        name="EventListScreen"
        component=EventTabs
        options=(navigation) => (
          title: parametersBand.APP_NAME,
          headerTintColor: colors.NAV_TEXT_COLOR,
          headerStyle: styles.navBar,
          headerTitleStyle: styles.navBarTextStyle,
          headerTitleAllowFontScaling: false,
          headerRight: () => (
            <HeaderRightContainer>
              <HeaderRightButton
                onPress=() =>
                  analytics()
                    .logEvent('extras')
                    .then(() => navigation.navigate('Extras'))
                
                hitSlop=hitSlop>
                <FontAwesome name="bars" style=styles.navBarButtonHamburger />
              </HeaderRightButton>
            </HeaderRightContainer>
          ),
          headerBackAllowFontScaling: false,
          headerBackTitle: null,
          headerBackTitleVisible: false,
          backgroundColor: colors.PRIMARY,
          borderBottomWidth: 0,
        )
      />
      <Stack.Screen
        name="EventDetailScreen"
        component=EventDetail
        options=(route, navigation) => (
          title: route.params.event.title,
          headerTintColor: colors.NAV_TEXT_COLOR,
          headerStyle: styles.navBar,
          headerTitleStyle: styles.navBarTextStyle,
          headerTitleAllowFontScaling: false,
          headerRight: () => (
            <HeaderRightContainer>
              <HeaderRightButton
                onPress=() =>
                  analytics()
                    .logEvent('setlist', 
                      event: `$route.params.event.YYYYMMDD $route.params.event.altName`,
                    )
                    .then(() =>
                      showBrowser(
                        navigation,
                        route.params.event.setlistURL,
                        parametersBand.SETLIST_TITLE,
                      ),
                    )
                
                hitSlop=hitSlop>
                <HeaderRightButtonText
                  style=styles.navBarButtonRight
                  allowFontScaling=false>
                  Setlist
                </HeaderRightButtonText>
              </HeaderRightButton>
            </HeaderRightContainer>
          ),
          headerBackAllowFontScaling: false,
          headerBackTitle: null,
          headerBackTitleVisible: false,
          backgroundColor: colors.PRIMARY,
          borderBottomWidth: 0,
        )
      />
</Stack.Navigator>

还有其他人遇到并解决过这个问题吗？

【参考方案1】：

我确定你现在已经解决了这个问题，但以防万一其他人遇到这个问题，就像我刚刚做的那样。

后退按钮的色调由主题处理，因此您可以覆盖 theme.colors.primary 以更改按钮和标题文本的色调。

<NavigationContainer theme=
  ...DefaultTheme,
  colors: 
    ...DefaultTheme.colors,
    primary: 'custom color here'
  
>
  ...
</NavigationContainer>