0

Пишу мобильное приложение на 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
  },
});

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

1 ответ 1

0

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

2
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 23 фев 2022 в 8:23
  • Прошу прошения, ни какой дополнительной информации не будет, ибо ответ получен страданиями, так как я прошерстил всю сеть и так и не нашёл эту информацию, ответ получен методом проб и ошибок, по этой причине ни какой дополнительной информации не будет, модераторов прошу строго не судить, если есть необходимость удалите мой ответ, с уважением 23 фев 2022 в 8:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.