react-native - 在 TouchableOpacity : React Native 上创建 "Raised"或阴影效果

Question

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

这是“凸起按钮”的示例，带有 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