StackNavigator：无法更改标题标题的字体颜色

Question

我正在尝试将标题字体的颜色从黑色更改为白色。做不到。我的代码中有以下内容：

navigationOptions: {
  title: 'PRACTICIA',
  headerLeft: null,
  headerStyle: {
    backgroundColor: '#33ACDE',
    color: 'white'
    }
  }
}

我得到以下结果（黑色）。

Answer 1

headerStyle

中定义的样式将应用于标题

<View />

。

要将样式应用于标题，您必须使用

headerTitleStyle

，如 StackNavigator 文档中所述。

navigationOptions: {
  title: 'PRACTICIA',
  headerLeft: null,
  headerStyle: {
    backgroundColor: '#33ACDE'
  },
  headerTitleStyle: {
    color: 'white'
  }
}

Answer 2

在您的 navigation.js 文件中，只需添加 **headerTitleStyle **，然后添加 您选择的颜色。请按照代码片段进行参考：

<Stack.Navigator 
       screenOptions={{
            headerTitleStyle : {
              color: 'white'
            }
       }} >

Answer 3

您可以使用

headerTintColor

属性，只需记住后退按钮和标题都使用此属性作为其颜色。

    navigationOptions: {
      title: 'PRACTICIA',
      headerTintColor: '#FFF', // <-- Add this
      headerLeft: null,
      headerStyle: {
        backgroundColor: '#33ACDE',
        }
      }
    }

有关此内容的更多信息，请参阅文档。