react native 实现阴影
在 React Native 中实现阴影效果可以通过以下几种方法实现：
使用 elevation（仅限 Android）
Android 平台可以直接使用 elevation 属性，这是最简单的方式，但仅适用于 Android 5.0 及以上版本。
<View style={{ elevation: 5 }} />使用 shadow 样式属性（iOS 和 Android）
React Native 提供了一套跨平台的阴影样式属性，但在 Android 上需要 API 级别 28（Android 9.0）及以上才能完全支持。
<View style={{
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
}} />使用第三方库
如果需要在较低版本的 Android 上实现阴影效果，可以使用第三方库如 react-native-shadow 或 react-native-drop-shadow。
import { Shadow } from 'react-native-shadow';
<Shadow distance={5} startColor="#00000020">
<View style={{ width: 100, height: 100, backgroundColor: 'white' }} />
</Shadow>使用 react-native-linear-gradient 模拟阴影
通过渐变效果模拟阴影，适用于复杂场景。
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient
colors={['#00000000', '#00000020']}
style={{ height: 10, width: '100%' }}
/>使用 react-native-svg 绘制阴影
通过 SVG 绘制自定义阴影效果，适用于需要精细控制的场景。
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg';
<Svg height="100" width="100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
<Stop offset="0" stopColor="#000" stopOpacity="0.5" />
<Stop offset="1" stopColor="#000" stopOpacity="0" />
</LinearGradient>
</Defs>
<Rect x="0" y="0" width="100" height="100" fill="url(#grad)" />
</Svg>注意事项
- Android 上的
shadow属性在低版本可能不生效，需测试目标平台兼容性。 - 使用第三方库时需注意性能影响，尤其是大量阴影效果的场景。
- 渐变或 SVG 实现的阴影可能不如原生阴影效果自然，但灵活性更高。
