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

【问题标题】：headerTintColor ignored for back button in iOS15 (react-navigation v5)iOS15 中后退按钮的 headerTintColor 被忽略（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>

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

【问题讨论】：

标签： ios react-native react-navigation

【解决方案1】：

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

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

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

【讨论】：