0
respostas

Como mudar background do header

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

function Tabs(){
    return(
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarActiveTintColor: '#fff',
            tabBarInactiveTintColor: '#777',
            //headerBackground: '#000000', -> Ele da um erro quando tento isso, da erro de renderização dizendo que headerbackGround não é uma funcão
            tabBarStyle: {
                backgroundColor: '#000',
                paddingBottom: 5,
                paddingTop: 5,
            },
        })}>
            <Tab.Screen 
            name='Historico' component={Historico} 
            options={{ 
                tabBarIcon: ({ size, color }) => (
                <AntDesign name='profile' size={size} color={color}/> 
                )
            }}/>


            <Tab.Screen 
            name='Relatorios' 
            component={Relatorios} 
            options={{ 
                tabBarIcon: ({ size, color }) => ( 
                <AntDesign name='areachart' size={size} color={color}/>
                )
            }}/>


            <Tab.Screen 
            name='Plus' 
            component={Plus} 
            options={{ 
                //tabBarLabel: '',
                tabBarIcon: ({ size, color }) => (
                    <AntDesign name='plus' size = {28} color={color}/>
                )
            }}/> 

            <Tab.Screen 
            name='Lembretes' 
            component={Lembretes} 
            options={{ tabBarIcon: ({ size, color }) => (
                <AntDesign name='clockcircleo' size={size} color={color}/> 
                )
            }}/>


            <Tab.Screen 
            name='Mais' 
            component={Mais} 
            options={{ tabBarIcon: ({ size, color }) => (
                <AntDesign name='ellipsis1' size={size} color={color}/>
                )
            }}/>


        </Tab.Navigator>
    )
}

export default function Routes(){
    return<>
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Tab">
                <Stack.Screen name= "Preload"  component= {Preload} options={{ headerShown: false}}/>
                <Stack.Screen name= "Tab" component={Tabs} options={{ headerShown: false }}/>
            </Stack.Navigator>
        </NavigationContainer>
    </>
}

Esse é meu projeto pessoal que estou desenvolvendo para aprender React Native e JS, mas estou tendo problemas para estilizar algumas coisas, como por exemplo o header do Bottom Tabs, quero mudar onde está 'Historico' e quero que se aplique a todas as outras tabs também! Grato!