Aron
What do I want to achieve?
I want to put the
tabBar
of
material-top-tab
on the title of the
stack
or
native-stack
navigator. At this time, the
tabBar
should only occupy the actual content width, not the entire screen width.
By default, the
tabBar
will be located below the
Header
, which greatly wastes screen space and does not meet our design guidelines.
What problems did I encounter?
I tried to use the
Header
component in
@react-navigation/elements
and assign the
tabBar
in
material-top-tab
to the
headerTitle
, but it resulted in a very strange effect. Here are my codes and the current effect:
```tsx
const MyTabBar: React.FC<MaterialTopTabBarProps> = React.memo(
({ state, ...props }) => {
return (
<Header
title={''}
headerTitleAlign={'center'}
headerTitle={() => (
<TabBar
{...props}
renderIndicator={(props1) => (
<TabBarIndicator
{...props1}
style={{ backgroundColor: 'transparent' }}
/>
)}
navigationState={state}
style={{ width: 200 }}
/>
)}
/>
);
},
);
```
As you can see，the whole
tabBar
become a color block，the tab bar label also disappeared