React Native 中的底部阴影

在 React Native 中，可以使用阴影属性来给组件添加阴影效果。阴影通常用在浮动按钮或卡片等 UI 元素上，给用户一种立体感和真实感。

而对于底部阴影，其实并没有专门的属性可以直接添加。但可以通过一些技巧来模拟出类似的效果。

前置知识

在介绍底部阴影之前，先简单介绍一下 React Native 中阴影相关的属性。

shadowColor: // 阴影的颜色，支持css颜色值，如'black'、'red'、'rgba(0,0,0,0.5)'
shadowOffset: { width: number, height: number } // 阴影的偏移量，默认值为（0, -3）
shadowOpacity: // 阴影的透明度，取值为 0~1 ，如0.5代表50%的透明度
shadowRadius: // 阴影的模糊半径，值越大，模糊程度越高
elevation: // 安卓特有属性，控制阴影高度，值越大，阴影越高越大

这些属性可以用于 View、Text 等组件。需要注意的是，如果要使用这些属性，必须先给组件添加背景色或边框，否则不会生效。

<View
  style={{
    backgroundColor: '#fff',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.3,
    shadowRadius: 5,
    elevation: 5,
  }}
>
  <Text>这是一个有阴影的 View </Text>
</View>

实现底部阴影

有了上述知识，我们可以开始实现底部阴影了。下面有两种方法可供选择。

1. 制作一个有底部阴影的图片作为背景

这种方法的思路是先制作一张有底部阴影的图片，然后将其作为背景图片使用。

首先，需要用 Photoshop 或其他图片处理工具制作一张有底部阴影的图片。可以通过倾斜或者渐变的方式实现。

然后，在组件的样式中设置 backgroundImage 属性为该图片的地址即可。

import React from 'react';
import { View, StyleSheet } from 'react-native';

const bgImage = require('./shadow-bg.png'); // 导入底部阴影图片

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f6f6f6',
    paddingBottom: 20, // 容器底部留出一定空间用于显示阴影
    backgroundImage: `url(${bgImage})`, // 设置背景图片
  },
});

export default function App() {
  return <View style={styles.container} />;
}

这种方法的优点是简单易懂，缺点是需先制作一张图片，且不太灵活。

2. 使用绝对定位和背景渐变模拟底部阴影

这种方法的思路是使用绝对定位和背景渐变来模拟底部阴影。具体实现步骤如下：

1. 给容器添加 position: relative 样式；
2. 在容器的最底部添加一个绝对定位的子元素；
3. 给该子元素设置宽度、高度和渐变背景色。

代码实现如下所示。

import React from 'react';
import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f6f6f6',
    position: 'relative', // 容器使用相对定位
  },
  shadow: {
    position: 'absolute',
    bottom: 0, // 子元素距离容器底部为0
    left: 0,
    right: 0,
    height: 20, // 阴影高度为20
    backgroundColor: 'transparent', // 背景色透明
    backgroundImage: 'linear-gradient(to top, #f6f6f6, rgba(0,0,0,0.1))', // 渐变背景色
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      {/* 容器最底部添加绝对定位子元素 */}
      <View style={styles.shadow} />
    </View>
  );
}

这种方法的优点是灵活，可以使用不同的颜色、高度和背景渐变等方式自定义阴影的样式。

总结

以上就是在 React Native 中实现底部阴影的两种方法。通过对样式属性和定位的理解，可以实现更多的 UI 效果。

建议在开发时，尽量避免使用大量的阴影效果，因为这会对性能产生不良影响。如有需要，可以通过减少阴影的半径或不透明度来优化性能。