Change the default light grey background color

问题

By default, every screen I created in react-native project use a very light grey color as its background color. As you see here:

I wonder instead of I set backgroundColor for each screen of my project, is there a global place in react-native project that I can set the backgroundColor once for all screens in my project? For example, I would like all my screens use blue color as background color.

回答1:

As you are already using react-navigation it has a theme provider which you can provide a custom theme, the code would be like below,

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
    background:'red'
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

You can have a look the documentation for more information

回答2:

I prefer to use react-native-global-props: https://www.npmjs.com/package/react-native-global-props Very simple: Install, Import and Declare.

import { setCustomText } from 'react-native-global-props';

Declare it in your highest order component.

const customViewProps = {
  style: {
    backgroundColor: '#d3d3d3' // light gray
  }
};

setCustomView(customViewProps);

Now it's for all View in your app.

来源：https://stackoverflow.com/questions/63159757/change-the-default-light-grey-background-color