在TouchableOpacity上创建"凸起"或阴影效果:React Native

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特定道具

Android特定道具