更改默认浅灰色背景颜色答案

【问题标题】：Change the default light grey background color更改默认浅灰色背景颜色
【发布时间】：2020-07-29 17:59:02
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-navigation

【解决方案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 了解更多信息

【讨论】：

如果background 是red，那primary 的作用是什么？
现在，我的标题和屏幕组件之间有一条灰线，如何删除该灰线？
对不起，这是示例的一部分，您可以删除它
@Leem.fin 对于灰线，您必须提供边框颜色，就像背景边框：'red' 或您喜欢的任何其他颜色
你好，我才发现android仍然显示灰线，它只在iOS中解决。有什么想法吗？

【解决方案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。

【讨论】：