在 TouchableOpacity 上创建“凸起”或阴影效果：React Native答案

【问题标题】：Create "Raised" or Shadow effect on TouchableOpacity: React Native在 TouchableOpacity 上创建“凸起”或阴影效果：React Native
【发布时间】：2018-05-03 19:51:59
【问题描述】：

我使用react-native-elements，它们可以很容易地使实际按钮显示为“凸起”或阴影。我想为TouchableOpacity 复制这个外观。

下面是带有react-native-elements 的“凸起按钮”示例。

它很微妙，但明显会产生很好的影响。您将如何使用TouchableOpacity 模拟这种效果？

是的，我已经浏览了文档。如果我遗漏了什么，请指出......但我认为没有什么可以做到这一点。谢谢。

【问题讨论】：

在TouchableOpacity 样式上使用elevation

标签： react-native button styling touchableopacity

【解决方案1】：

您可以将以下样式添加到您的TouchableOpacity 以使其升高。

<TouchableOpacity style={styles.button} />

  button: {
    shadowColor: 'rgba(0,0,0, .4)', // IOS
    shadowOffset: { height: 1, width: 1 }, // IOS
    shadowOpacity: 1, // IOS
    shadowRadius: 1, //IOS
    backgroundColor: '#fff',
    elevation: 2, // Android
    height: 50,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
},

您可以在此处阅读有关它们的更多信息。

IOS Specific Props

Android Specific Props

【讨论】：