更改默认的浅灰色背景色

Question

默认情况下，我在react-native项目中创建的每个屏幕都使用非常浅的灰色作为背景色。如您所见：

我想知道不是在我的项目的每个屏幕上都设置backgroundColor，而是在反应本地项目中有一个全局位置，可以为项目中的所有屏幕设置一次backgroundColor？例如，我希望我所有的屏幕都使用蓝色作为背景色。

Answer 1

由于您已经在使用react-navigation，因此它具有主题提供程序，您可以提供自定义主题，代码如下所示，

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

您可以查看documentation了解更多信息

Answer 2

我更喜欢使用react-native-global-props： https://www.npmjs.com/package/react-native-global-props 非常简单：安装，导入和声明。

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

在最高顺序的组件中声明它。

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

setCustomView(customViewProps);

现在，它适用于您应用中的所有View。