Shadows不能与react-native中的Touchable一起正常显示

Question

描述问题

我有一个具有阴影的组件，它看起来像下面的图像：

当我用Touchable包裹它时，它变得很难看，看起来像下面的图像：

如您所见，它似乎受正方形限制，而且看起来不太好。

---

我的代码

<TouchableOpacity>
  <View style={homeStyles.plusAndMinusButton}>
    <Text style={homeStyles.plusAndMinusButtonText}>+</Text>
  </View>
</TouchableOpacity>

还有我的样式看起来像这样：

  plusAndMinusButtonText: {
    color: '#888',
    fontSize: 28
  },
  plusAndMinusButton: {
    marginLeft: 20,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
    height: 45,
    width: 45,
    backgroundColor: 'white',
    shadowColor: "#84A4FF",
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 3,
  },

谁能帮我一起解决这个问题？

Answer 1

这是由于TouchableOpacity元素而发生的，您需要做的是提供TouchableOpacity样式或将其删除。如果您决定为TouchableOpacity赋予样式，请确保为其提供足够的高度，以免干扰阴影]