как отменить наследование стилей в react native

Question

Пишу мобильное приложение на react native с использованием expo, разрабатываю под ios, работаю успешно но возникла проблема, а именно проблема с тенями футера, я задаю тень всему футеру а применяются они к дочерним элементам, сам же футер ни как не реагирует на заданные ему стили, что я делаю не так?

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, TextInput, Image } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.wrapper}>
      <View style={styles.footer}>
        <View style={styles.footerWrap}>
          <View style={styles.footerNavi}>
            <Image
              style={styles.imageFooterNavi}
              source={require('./assets/gear.png')}
            />
            <Text style={styles.textNaviFooterActive}>Поиск</Text>
          </View>
          <View style={styles.footerNavi}>
            <Image
              style={styles.imageFooterNavi}
              source={require('./assets/heart.png')}
            />
            <Text style={styles.textNaviFooter}>Избранное</Text>
          </View>
          <View style={styles.footerNavi}>
            <Image
              style={styles.imageFooterNaviAdd}
              source={require('./assets/add-prod.png')}
            />
          </View>
          <View style={styles.footerNavi}>
            <Image
              style={styles.imageFooterNavi}
              source={require('./assets/messege.png')}
            />
            <Text style={styles.textNaviFooter}>Сообщения</Text>
          </View>
          <View style={styles.footerNavi}>
            <Image
              style={styles.imageFooterNavi}
              source={require('./assets/you.png')}
            />
            <Text style={styles.textNaviFooter}>Вы</Text>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  
  footer: {
    flex: 1,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    shadowColor: '#171717',
    shadowOffset: {width: 0, height: -2},
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  footerWrap: {
    flex: 1,
    flexDirection: "row",
    justifyContent: 'space-around',
    alignItems: 'center',
    height: '100%',
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
  },
  footerNavi: {
    alignItems: 'center'
  },
  imageFooterNavi: {
    width: 30,
    height: 30,
  },
  imageFooterNaviAdd: {
    width: 50,
    height: 50,
  },
  textNaviFooter: {
    color: '#959595',
    fontSize: 15,
    width: '100%',
    textAlign: 'center',
    top: 5
  },
  textNaviFooterActive: {
    color: '#1488CC',
    fontSize: 15,
    top: 5
  },
});

Код я сократил, оставил только блок футера

Answer 1

Итак, проблема оказалось в цвете компонента к которому применяется тень, для того чтобы стили тени сработали корректно надо компоненту задать цвет, я так понял если цвет не задавать явно, то стили тени применяться к дочерним компонентам (если конечно они имеют цвет), в моём случае стили применялись к иконкам, вот и всё, поправьте если ошибаюсь

БЛОГ НА HUSL

как отменить наследование стилей в react native

Ответы (1 шт):