Различия cssshadowEffect в Интернете и на мобильных устройствах (React Native) ⇐ CSS

[Anonymous]

Я создаю собственное приложение React и работаю над стилем вкладок. Tab.Screen выглядит следующим образом:

Код: Выделить всё

 (

{focused && }


),
tabBarLabel: ({ focused }: any) => (

Events

),
}}
/>

Таблица стилей выглядит следующим образом:

Код: Выделить всё

const styles = StyleSheet.create({
shadowEffect: {
...Platform.select({
ios: {
shadowColor: colors.secondary,
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.15,
shadowRadius: 50, // Reduce radius for mobile consistency
},
android: {
shadowColor: colors.secondary,
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.15,
shadowRadius: 5,
},
web: {
shadowColor: colors.secondary,
shadowOffset: { width: 0, height: 5 },
shadowRadius: 50,
},
}),
backgroundColor: "rgba(0, 122, 255, 0.17)",
borderRadius: 20,
padding: 1,
},
activeBar: {
...Platform.select({
web: {
position: "absolute",
top: -8,
left: "50%", // Start in the center
transform: [{ translateX: -15 }], // Offset to center the active bar
width: 30, // Fixed width for consistency across tabs
height: 8,
backgroundColor: colors.fitness_tab,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
android: {
position: "absolute",
top: -8,
left: -3, // Start in the center
width: 30, // Fixed width for consistency across tabs
height: 8,
backgroundColor: colors.fitness_tab,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
}),
},
});

Причина, по которой я создал разные стили в зависимости от платформы, заключается в том, что одни и те же правила не применяются на всех платформах. Например, с текущим кодом я получаю следующий вид в Интернете:
[img]https://i.sstatic.net /ZZIQPrmS.png[/img]

В то время как на мобильном телефоне (android) у меня такой вид:


На Android тень очень густая и темная.
Как мне добиться того же внешнего вида тени на Android, что и в Интернете?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/791 ... act-native