React native проиcходит обработка нажатий на BottomTabTar вне зоны его отрисовки
Собственно имеется экран контейнер для вкладок с кодом навигатора в виде bottomtabbar, на самих экранах имеются множество разных компонентов, флэтлист, флэт грид, скроллы, модалки и т.д. Само приложение - интернет магазин, так вот переключение вкладок происходит даже тогда, когда на экране нет кликабельных элементов, и человек нажимает выше таб бара даже на 200% его высоты. Косяк одинаковый и на ИОС и андроид. Я пробовал делать отступ содержимого экрана от таб панели, но это непомогло. На изображении мышкой показано где происходит обработка нажатия на панель таб, причем если под областью нажатия будет кликабельный элемент, то он перехватит событие клика на себя и таб не обработает нажатие. Если элемент не кликабельный то таб обработает нажатие. Пакет "@react-navigation/bottom-tabs": "^6.5.20",
return (<Tab.Navigator
screenOptions={{
headerShown: false,
activeTintColor: '#000000',
activeBackgroundColor: '#E2E2E2',
inactiveBackgroundColor: '#ffffff',
}}>
<Tab.Screen
name="ScreenTabMain"
tabBarItemStyle={{height: 20}}
options={{
tabBarIcon: props => {
const icon = props.focused
? require('../assets/icons/screen_home_active.png')
: require('../assets/icons/screen_home.png');
return <Image source={icon} style={{width: 20, border: 0,
margin: 0,
padding: 0,}} resizeMode="contain"/>;
},
tabBarLabel: ({ focused }) => {
return (
focused ? <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
backgroundColor: "white",
justifyContent: "center",
border: 0,
margin: 0,
padding: 0,
color:"#309718"
}}
>Главная</Text> : <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#181725"
}}
>Главная</Text>
);
},
}}
component={ScreenTabMain} />
<Tab.Screen
name="ScreenTabCatalog"
options={{
tabBarIcon: props => {
const icon = props.focused
? require('../assets/icons/screen_catalog_active.png')
: require('../assets/icons/screen_catalog.png');
return <Pressable onPress={()=>openCatalogScreen()}><Image source={icon} style={{width: 20}} resizeMode="contain"/></Pressable>; },
tabBarLabel: ({ focused }) => {
return (
focused ? <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#309718"
}}
>Каталог</Text> : <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#181725"
}}
>Каталог</Text>
);
},
}}
component={ScreenTabCatalog} />
<Tab.Screen
name="ScreenTabBasket"
options={{
tabBarIcon: props => {
const icon = props.focused
? require('../assets/icons/screen_cart_active.png')
: require('../assets/icons/screen_cart.png');
return <View style={{justifyContent: 'center',alignItems: 'center'}}>
{basketCostView()}
<Image source={icon} style={{width: 20}} resizeMode="contain"/>
</View>},
tabBarLabel: ({ focused }) => {
return (
focused ? <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#309718"
}}
>Корзина</Text> : <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#181725"
}}
>Корзина</Text>
);
},
}}
component={ScreenTabBasket} />
<Tab.Screen
name="ScreenTabFavorites"
options={{
tabBarIcon: props => {
const icon = props.focused
? require('../assets/icons/screen_fav_active.png')
: require('../assets/icons/screen_fav.png');
return <Image source={icon} style={{width: 20}} resizeMode="contain"/>;
},
tabBarLabel: ({ focused }) => {
return (
focused ? <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#309718"
}}
>Избранное</Text> : <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#181725"
}}
>Избранное</Text>
);
},
}}
component={ScreenTabFavorites} />
<Tab.Screen
name="ScreenTabProfile"
options={{
tabBarIcon: props => {
const icon = props.focused
? require('../assets/icons/screen_profile_active.png')
: require('../assets/icons/screen_profile.png');
return <Image source={icon} style={{width: 20}} resizeMode="contain"/>;
},
tabBarLabel: ({ focused }) => {
return (
focused ? <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#309718"
}}
>Профиль</Text> : <Text
style={{
fontFamily:"Rubik_400Regular",
fontSize:12,
fontWeight:"500",
color:"#181725"
}}
>Профиль</Text>
);
},
}}
component={ScreenTabProfile} />
</Tab.Navigator>)
}
Ответы (1 шт):
Дело было в неправильном растягивании изображений, задали статичный размер изображений на кнопках и все пришло в норму. Глюк не очевидный так как картинки отображались правильно.