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

[Anonymous]

Я создаю нативное приложение, реагирующее на реакцию, и в настоящее время работаю над стилем вкладок. 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,
},
}),
},
});

Причина, по которой я создал разные стили в зависимости от платформы, заключается в том, что одни и те же правила не применяются на всех платформах. Например, с текущим кодом я получаю следующее появление в сети:
[вид вкладок в сети][1]
[1]: https://i. sstatic.net/ZZIQPrmS.png
В то время как на мобильном устройстве (android) у меня такой вид:
[внешний вид вкладок на устройстве Android][2 ]
[2]: https://i.sstatic.net/QSLIlBpn.jpg
На Android тень очень плотная и темная.
Как я мог добиться внешний вид тени на Android похож на ту, что есть в Интернете?
Заранее спасибо!

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