更改导航标题背景颜色

Question

苦苦挣扎,了解如何更改导航标题栏背景颜色.我正在使用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

将此粘贴到目标屏幕中

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

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