React Native投影

6vl6ewon 于 2022-11-30 发布在 React

关注(0)|答案(3)|浏览(165)

我需要将阴影选项添加到Android应用程序中的按钮。在react中，本机默认选项（shadowColor、shadowOpacity、shadowRadius）仅适用于iOS版本。Android仅适用于高程选项。有人知道如何做到这一点吗？我使用了react-native-shadow，但它的旧版本不支持最新的react本机版本，它从SVG组件中得到错误，即使我们手动安装了它。

react-native

来源：https://stackoverflow.com/questions/55015715/react-native-drop-shadow

3条答案

按热度按时间

q1qsirdb1#

您可以使用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
      },
    }),
  }
})

赞(0）回复(0）举报 2022-11-30

anauzrmj2#

在react-native中，应该避免编写特定于平台的代码。
当需要处理此类任务时-您应该使用现有库或创建自己的库。
react-native-drop-shadow就是其中一个很好的例子。或者你可以使用一个类似于我在我的应用程序中使用的方法，只在一个样式对象中包含立面和阴影样式。

不需要外部程式库：

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

赞(0）回复(0）举报 2022-11-30

x4shl7ld3#

尝试使用以下库：
https://github.com/Kishanjvaghela/react-native-cardview
它将满足您的要求

赞(0）回复(0）举报 2022-11-30