更改导航标题背景颜色答案

【问题标题】：Change navigation header background color更改导航标题背景颜色
【发布时间】：2017-07-26 14:17:38
【问题描述】：

努力了解如何更改导航标题栏背景颜色。我正在使用反应导航和 Expo 来构建我的应用程序。

backgroundColor 似乎什么也没做。知道怎么做吗？

我的代码如下：

static navigationOptions = () => ({
    title: 'My App',
    headerTintColor: Colors.DarkBlue,
    backgroundColor: 'red',
    headerLeft:
      <HeaderBarItem to='InfoScreen' title='App info' />,
    headerRight:
      <HeaderBarItem to='FeedbackScreen' title='Feedback' />
  });

【问题讨论】：

标签： react-native react-navigation expo

【解决方案1】：

这应该可行：

static navigationOptions = () => ({
    title: 'My App',
    headerTintColor: Colors.DarkBlue,
    headerStyle: {
      backgroundColor: 'red'
    },
    headerLeft:
      <HeaderBarItem to='InfoScreen' title='App info' />,
    headerRight:
      <HeaderBarItem to='FeedbackScreen' title='Feedback' />
  });

【讨论】：

@Aakash 这个 Colors.DarkBlue 和
这些只是问题@JP中的组件和变量

【解决方案2】：

将此粘贴到您的目标屏幕中

static navigationOptions = ({ navigation }) => {
   return {
      title: 'Screen Title',
      headerTintColor: 'royalblue',
      headerStyle: {
         backgroundColor: '#fff'
      }
   }
}

【讨论】：

【解决方案3】：

我在整个论坛中尝试了许多答案，但找不到有效的解决方案。最后，如果您使用最新的 RN，以下内容对我有用，并且对您也有用：

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

与其他解决方案相比非常具有解释性

【解决方案4】：

你可以在你的视图组件中使用

<StatusBar backgroundColor = '#fff' />

这在 android 上对我有用

当然不要忘记从 'react-native' 导入 StatusBar

【讨论】：