React Native下落阴影

Question

我需要在Android应用程序的按钮上添加投影选项。 在React中，原生默认选项（shadowColor、shadowOpacity、shadowRadius）仅适用于iOS版本。 Android仅适用于高度选项。 有人知道怎么做吗？ 我使用了react-native-shadow，但它比较老，不支持最新的React Native版本，即使我们手动安装它也会从SVG组件中出现错误。

- Isuru Sanjana

---

要添加阴影，您只能使用高程（elevation），使用高程，您可以相应地使用shadowOpacity、shadowOffset和shadowRadius。 - Akshay Mulgavkar

Answer 1

你可以使用React Native的Platform模块来设置特定于操作系统的样式。例如：

import { Platform, StyleSheet } from 'react-native';

// your component //////

const styles = StyleSheet.create({        
  button: {

    // cross-platform css

    ...Platform.select({
      ios: {
        shadowColor: rgba(0,0,0),
        shadowOpacity: 0.5,
        shadowRadius: 5
      },
      android: {
        elevation: 5
      },
    }),
  }
})

- Marcus

Answer 2

尝试使用以下库：

https://github.com/Kishanjvaghela/react-native-cardview

它将满足您的需求

- Brijesh Shiroya

Answer 3

在React Native中，应避免编写特定于平台的代码。

当需要处理此类任务时，您应该使用现有库或创建自己的库。 react-native-drop-shadow是这些情况的一个很好的例子。或者您可以使用类似于我在我的应用程序中使用的方法，只需将高程和阴影样式包含在单个样式对象中即可。 无需外部库：

elevation: 5,              // Android
shadowColor: '#030002',    // Android, iOS & Web
shadowOpacity: 0.25,       // iOS & Web
shadowRadius: 5            // iOS & web

- Owen Easter