Phản ứng bản địa bóng không xuất hiện

Question

Tôi đang cố gắng để có được một cái bóng bên dưới quan điểm của tôi, và từ những gì tôi tìm thấy trực tuyến nó nên được khá đơn giản:

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

nhưng vấn đề là cái bóng là không xuất hiện chút nào.

Dưới đây là các thành phần của tôi

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

và trong StyleSheet tôi:

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

Bất kỳ lý do cho điều này hoặc là có cái gì đó tôi đã bỏ lỡ?

Answer 1

Bóng có hoạt động trên IO không? Android và iOS hoạt động ≠ trong React-Native. Đối với android, nó hoạt động với 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 
} 

Nếu không, hãy cố gắng thiết lập một màu nền cho phần bóng của bạn :)

Answer 2

Đối với iOS, nâng cao zIndex của bên ngoài <View>

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