React Native中elevation阴影不生效，添加borderWidth后恢复的原因

核心原因 #

在Android平台上，React Native的elevation阴影效果依赖于视图拥有明确的背景或边界。当带elevation的View未设置自身backgroundColor（或背景完全透明）时，Android系统无法识别视图的轮廓，也就无法渲染对应的阴影。而添加borderWidth后，相当于给视图定义了清晰的边界，系统就能基于这个边界生成阴影。

你的代码中，带有elevation的子View并未设置自身的backgroundColor——虽然父View是白色，但子View本身背景默认透明，这就导致Android无法渲染阴影。

解决方法 #

直接给带elevation的View添加backgroundColor即可，无需依赖borderWidth：

<View style={{ backgroundColor: '#fff', flex: 1 }}>
  <View style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    paddingVertical: 22,
    paddingHorizontal: 20,
    alignItems: 'center',
    elevation: 5,
    shadowColor: "#E0E0E0",
    backgroundColor: '#fff', // 新增这一行，给当前视图设置背景色
  }}>
    <View>
      <Text style={styles.totalText}>Total Amount</Text>
      <Text style={{ fontFamily: 'Manrope Bold', fontSize:20 }}>{selectedIndex?.month}</Text>
    </View>
    <PrimaryButton label="Pay Now" onPress={() => onClickPayNowButton()} style={{ width: 128 }} />
  </View>
</View>

补充说明 #

• Android和iOS的阴影实现逻辑不同：elevation是Android专属属性，iOS需要通过shadowColor、shadowOffset、shadowOpacity、shadowRadius这几个属性组合实现阴影。
• 不要用borderWidth作为触发阴影的临时手段，给视图设置明确的背景色才是稳定且符合组件设计逻辑的解决方案。

内容的提问来源于stack exchange，提问作者Shivani Panda