React-natywną cień nie pojawia

Question

Próbuję dostać cień poniżej moich poglądów, a od tego, co znalazłem w Internecie powinna być dość prosta:

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

ale problemem jest to, że jest cień w ogóle się nie pojawia.

Oto moje składniki

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

i moim arkusza stylów:

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

Każdy powód do tego, czy jest tam coś Tęskniłam?

Answer 1

Czy cień działa na OI? Android i IOS działają ≠ w trybie-React-natywnym. Dla Androida działa z elevation.

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 
} 

W przeciwnym razie, spróbuj ustawić kolor tła do komponentu cienia :)

Answer 2

dla iOS, podnieść zIndex swojej zewnętrznej <View>

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