默认情况下,我在react-native项目中创建的每个屏幕都使用非常浅的灰色作为背景色。如图所示:
我想知道,在react-native项目中是否有一个全局位置,而不是为项目的每个屏幕设置backgroundColor,我可以为项目中的所有屏幕设置一次backgroundColor?例如,我希望我所有的屏幕都使用蓝色作为背景色。
backgroundColor
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以了解更多信息
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> </> ); }
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。
View
3条答案
按热度按时间brccelvz1#
因为你已经在使用react-navigation了,它有一个主题提供程序,你可以提供一个自定义主题,代码如下所示,
您可以查看documentation以了解更多信息
zf9nrax12#
在堆栈导航器中,您可以使用
注意:#f6f6f6f是红色的颜色代码,你可以根据你的要求改变它,下面是额外的代码片段,以防万一
wbgh16ku3#
我更喜欢使用react-native-global-props:https://www.npmjs.com/package/react-native-global-props非常简单:安装、导入和删除。
在你的最高阶分量中分解它。
现在它适用于您应用中的所有
View
。