React Native安卓端ScrollView内View阴影显示异常如何解决

安卓端React Native开发中，通过elevation属性给View设置阴影时效果不符合预期：仅底部显示阴影，侧边无阴影，也没有淡出渐变效果。
复现代码如下：

<View
    style={{
      width: '100%',
      padding: 8,
      elevation: 20,
      backgroundColor: 'white',
      shadowColor: 'green',
      margin: 10,
    }}>
    <TextInput
      style={{
        borderWidth: 1,
        borderRadius: 5,
        width: '70%',
        borderColor: colors.createWorkout,
        backgroundColor: colors.primary,
      }}
      placeholder={'Title'}
    />
  </View>

场景补充：

• 异常仅出现在目标View放在带padding的ScrollView内部的场景，阴影无法在ScrollView的padding区域显示
• 目标View放在普通View容器内时，阴影渲染完全正常
  

安卓原生渲染逻辑下，ScrollView默认开启子元素绘制裁剪，所有超出ScrollView内容边界的子元素绘制内容都会被截断。elevation生成的阴影是View向外延伸的绘制层，当ScrollView设置了padding，padding对应的区域属于ScrollView的内边距范围，子View延伸到这个区域的阴影会被直接裁掉，最终只保留了未被裁剪的底部阴影部分，侧边阴影、渐变效果都因为被裁剪无法显示。
额外提示：安卓端shadowColor属性仅在API 28及以上版本可配合elevation修改阴影颜色，低版本系统下阴影固定为系统默认黑色，设置该属性不生效。

给ScrollView添加overflow: 'visible'样式，关闭默认的子元素绘制裁剪即可：

<ScrollView
  style={{
    padding: 10, // 原有padding配置保留
    overflow: 'visible' // 新增该配置，允许子元素渲染超出边界的内容
  }}
>
  {/* 原有设置elevation的View组件直接放在这里 */}
  <View
    style={{
      width: '100%',
      padding: 8,
      elevation: 20,
      backgroundColor: 'white',
      shadowColor: 'green',
      margin: 10,
    }}>
    <TextInput
      style={{
        borderWidth: 1,
        borderRadius: 5,
        width: '70%',
        borderColor: colors.createWorkout,
        backgroundColor: colors.primary,
      }}
      placeholder={'Title'}
    />
  </View>
</ScrollView>

如果配置后仍有边缘阴影被截断，可以适当给设置了elevation的目标View增加外层margin，为阴影预留足够的渲染空间，避免被其他父容器边界裁切。

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