你将不得不使用不同风格的 prop 为iOS和Android。

安卓

对于android来说非常简单，只需要使用elevation风格 prop （参见文档）。

boxWithShadow: {
    elevation: 5
}

操作系统

在iOS中，您可以更灵活地使用阴影 prop （请参阅docs）。

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

摘要

总之，要获得两个平台的长方体阴影，请使用两组样式属性：

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

***注意：***不要使用overflow: 'hidden';，在iOS中，所有阴影都会因此属性而消失。

“天然React”：“0.7至0.5英寸”

//Style

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    shadow: {  
        width: 200,
        height: 200,
        backgroundColor: "fff",
        // Android
        elevation: 8,
        // shadow color
        shadowColor: "blue",
        //iOS
        shadowOffset: { width: 5, height: 5 },
        shadowOpacity: 0.26,      
    }
});

//Component

const Shadow = ({ children }) => {
    return (
        <View style={styles.container}>
            <View style={styles.shadow}>{children}</View>
        </View>
    );
};

你可以使用库“react-native-shadow-2”，适用于android和iOS。不需要为iOS/android编写单独的代码块&也支持 typescript 。
安装：
1.首先安装react-native-svg。
1.然后安装react-native-shadow-2：npm iReact-天然-影子-2
结构：

import { Shadow } from 'react-native-shadow-2';

<Shadow>
   {/* Your component */}
</Shadow>

有很多 prop ，如startColor，finalColor，半径，偏移量。你可以根据自己的需要使用。

我已经找到了一个非常类似的问题使用线性渐变的解决方案。我还没有发现任何更好的堆栈上的任何地方，所以我想我会添加它在这里。这是特别好的和容易的，如果你只想顶部和底部，或侧面阴影。
我在一张全宽和140高的图片上添加了一个顶部和底部的内框阴影。你可以创建多个渐变来制作外框阴影。不要忘记角。你可以使用开始和结束 prop 来制作有Angular 的阴影/渐变，如果你需要的话，也许这对角也有用。

<ImageBackground
  source={imagePicker(this.props.title)}
  style={styles.image}
>
  <LinearGradient 
    colors={[
      'transparent',
      'transparent',
      'rgba(0,0,0,0.2)',
      'rgba(0,0,0,0.6)'
    ]}
    start={[0,0.9]}
    end={[0,1]}
    style={styles.image_shadows}
  />
  <LinearGradient 
    colors={[
      'rgba(0,0,0,0.6)',
      'rgba(0,0,0,0.2)',
      'transparent',
      'transparent'
    ]}
    start={[0,0]}
    end={[0,0.1]}
    style={styles.image_cover}
  />
</ImageBackground>


const styles = StyleSheet.create({
  image: {
    flex: 1,
    resizeMode: "stretch",
    justifyContent: "center",
    paddingTop:90,
    paddingLeft:10,
    height:140,
    flexDirection: 'row',
  },
  image_shadows: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 140
  }
}

如果你使用expo，你可以用“expo install expo-linear-gradient”Expo Docs来安装它，如果不是，我相信react-native-linear-gradient是类似的React-Native-Linear-Gradient github。

有时候，即使组件已经应用了阴影效果，如果组件占据了屏幕的整个宽度和高度，阴影效果可能不会立即可见。在这种情况下，建议通过添加边距、更改背景色、或使用其它视觉提示来产生组件与其周围环境之间的对比。这有助于突出阴影效果，使其对用户更明显。

风格

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  box: {
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0, 0, 0, 1)',
        shadowOpacity: 0.5,
        shadowRadius: 5,
        shadowOffset: {
          height: 5,
          width: 5,
        },
      },
      android: {
        elevation: 5,
        backgroundColor: 'rgba(0, 0, 0, 1)',
      },
    }),
  },
});

组件

const Shadow = ({ children }) => {
    return (
        <View style={styles.box}>{children}</View>
    );
};