React-native shadow не появляется

Я пытаюсь получить тень ниже моих взглядов, и из того, что я нашел в Интернете, должно быть довольно просто:

    shadowOffset: { width: 10, height: 10 },
    shadowColor: 'black',
    shadowOpacity: 1.0,

но проблема в том, что тень вообще не появляется.

Здесь мои компоненты

      <View style={styles.shadow}>
        <View style={styles.box} >
          <View style={styles.ListComponent}>
            <Text style={styles.itemText}>Livestream</Text>
          </View>
        </View>
      </View>

и в моем StyleSheet:

const styles = StyleSheet.create({
   shadow: {
   shadowOffset: { width: 10, height: 10 },
   shadowColor: 'black',
   shadowOpacity: 1.0
},

Любая причина для этого или есть что-то, что я пропустил?

ОТВЕТЫ

Ответ 1

Работает ли тень на МО? Android и IOS работают в React-Native. Для android он работает с высотой.

const styles = StyleSheet.create({
shadow: {
  shadowOffset: { width: 10, height: 10 },
  shadowColor: 'black',
  shadowOpacity: 1,
  elevation: 3,
  // background color must be set
  backgroundColor : "#0000" // invisible color
}

В противном случае попробуйте установить цвет фона для вашего теневого компонента :)

Ответ 2

Для iOS поднимите zIndex внешнего <View>

const styles = StyleSheet.create({  
 shadow: {  
  shadowOffset: { width: 10, height: 10 },  
  shadowColor: 'black',  
  shadowOpacity: 1,  
  elevation: 3,  
  zIndex:999,  
}

Ответ 3

Я тоже хотел, чтобы в моем приложении для Android была тень под моим видом. Итак, хитрость, которую я нашел, была:

Для IOS:

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

И для Android:

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

Если вы работаете над элементами пользовательского интерфейса, я предлагаю вам взглянуть на сайт NativeBase. Они облегчили жизнь, когда дело касается стиля.

Ответ 4

Вы можете использовать реакцию-родной-простой-теневой вид

  • Это позволяет практически идентичные тени в Android как в iOS
  • Нет необходимости использовать высоту, работает с теми же параметрами тени в iOS (shadowColor, shadowOpacity, shadowRadius, offset и т.д.), Поэтому вам не нужно писать стили тени для конкретной платформы
  • Может использоваться с полупрозрачными видами
  • Поддерживается в Android 18 и выше