React-native 阴影未出现在应用程序屏幕中

Question

我正在开发 React-native App。 早些时候阴影工作正常，但现在在整个应用程序中，阴影不可见。

我知道 StackOverflow 上有很多问题和解决方案。 我已经尝试了一切，但对我没有任何作用。

我试图像这样添加backgroundColor颜色：

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
}

我还删除了overflow: 'hidden' ;

但是对代码没有影响。

我正在为 android 使用elevation 。 它不适用于任何应用程序屏幕。 如果有人面临同样的问题，请分享解决方案。 TIA

Answer 1

这对我有用

   {
        paddingVertical: 12,
        marginTop: 20,
        marginBottom: 70,
        width: '100%',
        borderColor : 'gray', 
        borderWidth : 0.1,
        paddingHorizontal : 12,
        backgroundColor : '#fff',
        margin:8,
        width:'60%',
        alignItems : 'center',
        shadowOpacity: 0.25,
        shadowRadius: 2,
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowColor: '#000000',
        elevation: 4,
    }

Answer 2

请参见下面的示例，我为 ios 和 android 创建了一个 Shadow box。 我想这会帮助你。

import React, { Component } from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';

const screenHieght = Dimensions.get('window').height;
class ShadowBox extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

        <View style={styles.innerView}>
          <View style={styles.outer}>
            <Text style={{ textAlign: 'center' }}>card </Text>
          </View>
          <View style={styles.outer}>
            <Text style={{ textAlign: 'center' }}>card </Text>
          </View>
        </View>

      </View>
    );
  }
}

const styles = {
  innerView: {
    borderWidth: 1,
    backgroundColor: Platform.OS === 'ios' ? '#fff' : null,
    borderColor: '#ddd',
    shadowColor: Platform.OS === 'ios' ? 'green' : '#fff',
    shadowOffset: {
      width: Platform.OS === 'ios' ? 3 : 0,
      height: Platform.OS === 'ios' ? 3 : 2,
    },
    shadowOpacity: Platform.OS === 'ios' ? 1 : 0.8,
    shadowRadius: Platform.OS === 'ios' ? null : 40,
    elevation: Platform.OS === 'ios' ? null : 4,
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 300,
  },
  outer: {
    margin: 10,
    padding: 10,
    alignSelf: 'center',
    borderWidth: 1,
    width: '80%',
    overflow: 'hidden',
  },
};

export default ShadowBox;

如有疑问，请放心。