结合TouchableOpacity和elevation显示丑陋阴影的React原生onPress

TouchableOpacity是React Native中的一个可触摸组件，用于实现触摸事件的处理。而elevation是一个Android特有的属性，用于设置视图的阴影效果。

结合TouchableOpacity和elevation可以实现在React Native中显示阴影的效果。当用户点击TouchableOpacity组件时，可以通过设置elevation属性来改变组件的阴影效果，从而提升用户的交互体验。

具体实现步骤如下：

首先，确保已经安装了React Native的开发环境，并创建了一个React Native项目。
在需要使用TouchableOpacity的组件中，引入TouchableOpacity组件：

import { TouchableOpacity } from 'react-native';

在组件的render方法中，使用TouchableOpacity包裹需要添加阴影效果的内容：

render() {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={this.handlePress}
      activeOpacity={0.8}
    >
      {/* 添加需要显示的内容 */}
    </TouchableOpacity>
  );
}

在组件的样式中，设置elevation属性来改变阴影效果的大小：

const styles = StyleSheet.create({
  button: {
    elevation: 2, // 设置阴影效果的大小
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 5,
  },
});

在上述代码中，elevation属性的值可以根据需要进行调整，数值越大，阴影效果越明显。

优势：