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

Question

后退按鈕的值headerTintColor在 iOS 15 中被忽略，而是使用系統標准藍色。 Title 和 Header Right 按鈕仍然尊重我傳入的值。我正在使用 react-navigation v5，如果可以避免的話，我現在正試圖避免升級到 v6。 （而且我不知道這是否發生在 v6 中？）。 這發生在設備和模擬器上。

iOS 15（通過模擬器）： iOS 15 的屏幕截圖顯示藍色后退按鈕

iOS <= 14（通過模擬器）： iOS 13 的屏幕截圖顯示白色后退按鈕

 <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>

有沒有其他人遇到並解決這個問題？

Answer 1

我相信你現在已經解決了這個問題，但以防萬一其他人遇到這個問題，就像我剛剛做的那樣。

后退按鈕的色調顏色由主題處理，因此您可以覆蓋theme.colors.primary以更改按鈕和標題文本的色調顏色。

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