在 TouchableOpacity 上创建 "Raised" 或阴影效果：React Native

Question

我使用 react-native-elements，它们可以很容易地使实际按钮显示 "raised" 或隐藏。我想为 TouchableOpacity.

复制这个外观

这是 "raised buttons" 和 react-native-elements 的示例。

这是微妙的，但明显产生了很好的影响。您将如何使用 TouchableOpacity 来模仿这种效果？

是的，我已经阅读了文档。如果我遗漏了什么，请指出……但我认为没有什么可以实现的。谢谢。

Answer 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

在 TouchableOpacity 上创建 "Raised" 或阴影效果：React Native

Create "Raised" or Shadow effect on TouchableOpacity: React Native

button

styling

react-native

touchableopacity