React Native 更改默认的浅灰色背景色

2w2cym1i  于 2023-10-22  发布在  React
关注(0)|答案(3)|浏览(196)

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

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

brccelvz

brccelvz1#

因为你已经在使用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以了解更多信息

zf9nrax1

zf9nrax12#

在堆栈导航器中,您可以使用

<Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>

注意:#f6f6f6f是红色的颜色代码,你可以根据你的要求改变它,下面是额外的代码片段,以防万一

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <>
      <StatusBar style='auto' />
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>
          <Stack.Screen name="List Page" component={ListPage} />
          <Stack.Screen name="List Page 2" component={ListPage} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}
wbgh16ku

wbgh16ku3#

我更喜欢使用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

相关问题