Hey there! Let's get that navigation bar background color working for you. Looking at your code, I notice you're trying to set the background color inside the titleConfig's style—but that's actually for styling the title text itself, not the navigation bar container. Let's break down how to fix this based on what navigation component you're using:

1. If you're using React Navigation (the most common modern library) #

React Navigation uses specific props to style the header/navigation bar. Here's how to set the background color properly:

For React Navigation v5+ (Functional Components) #

Use the options prop on your Stack.Screen component:

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={YourHomeComponent}
          options={{
            title: 'XYZ',
            // This is where you set the navigation bar background
            headerStyle: {
              backgroundColor: '#2ec76e',
            },
            // Optional: Style the title text if needed
            headerTitleStyle: {
              color: '#ffffff', // White text to contrast the green background
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

For Class Components (React Navigation v4 or v5) #

You can use the static navigationOptions property:

class YourHomeComponent extends React.Component {
  static navigationOptions = {
    title: 'XYZ',
    headerStyle: {
      backgroundColor: '#2ec76e',
    },
  };

  render() {
    return (
      <View style={styles.container}>
        {/* Your screen content here */}
      </View>
    );
  }
}

const styles = {
  container: {
    backgroundColor: '#24686e',
    flex: 1,
  },
};

2. If you're using the older NavigationBar component #

If you're sticking with the legacy NavigationBar (not recommended for new projects), you need to apply the background color directly to the NavigationBar component's style prop, not the title config:

return (
  <View style={styles.container}>
    <NavigationBar
      title={titleConfig}
      // Set navigation bar background here
      style={{ backgroundColor: '#2ec76e' }}
    />
  </View>
);

// Your title config is for styling the title text only
const titleConfig = {
  title: 'XYZ',
  style: {
    color: '#ffffff', // Style the title text color here
    fontSize: 18,
  },
};

const styles = {
  container: {
    backgroundColor: '#24686e',
    flex: 1,
  },
};

Key Takeaway #

The mistake in your original code was targeting the title's style instead of the navigation bar's container style. Make sure to apply the background color to the correct prop based on your navigation tooling!

内容的提问来源于stack exchange，提问作者SANTOSH