更改导航 header 背景颜色

Question

难以理解如何更改导航 header 栏背景颜色。我正在使用 React Navigation 和 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' />
  });

Answer 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' />
  });

Answer 2

您可以只在视图组件内部使用

<StatusBar backgroundColor = '#fff' />

这对我有用 android

别忘了从 'react-native' 导入 StatusBar 当然

Answer 3

Paste this in your targeted screen

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

Answer 4

我在整个论坛中尝试了很多答案，但找不到可行的解决方案。最后，下面对我有用，如果你使用最新的 RN，也会对你有用：

export default function App() {

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

更改导航 header 背景颜色

Change navigation header background color

react-native

react-navigation

expo