反应本机 onPress 与 TouchableOpacity 结合海拔显示丑陋的阴影

Question

在环境中使用RN 0.63.4并尝试实现可触摸卡Android。

代码非常简单：

<TouchableOpacity onPress={() => handlePress()}>
    <ArticleContainer>
        ....
    </ArticleContainer>
</TouchableOpacity>

这是 CSSArticleContainer

const ArticleContainer = styled.View`
    height: 170px;
    width: 320px;
    border-radius: 11px;
    padding: 13px;
    margin: 20px 15px 10px 20px;
    elevation: 5;
    background-color: white;
`;

未触摸时 UI 看起来很好，甚至海拔看起来也不错：

但当试图触摸它时，它变得如此丑陋，看看奇怪的阴影和边框：

在 StackOverflow 中只找到了几个答案，在官方 GitHub 中找到了一个答案，但这两个答案都不适合我。

有办法解决吗？

Answer 1

解决方案：

我最近遇到了类似的问题。TouchableOpacity对我有用的是在它上面而不是内部应用阴影View。

是什么导致了这个问题？

不确定，但我认为当阴影应用于 时View，TouchableOpacity会降低其子级的不透明度View，即在按下时，这不会影响其阴影，使它们暴露在外。

话虽这么说，我真的不确定为什么应用阴影有效TouchableOpacity。

其他可能的原因/解决方案

• backgroundColor- 在许多情况下，未在带有阴影的组件上设置背景颜色会导致阴影无法正常运行。如果您不需要任何背景颜色，只需将其设置为透明即可。

笔记：

该解决方案对我有用，但我不确定它是否是最好的解决方案，或者即使它是否适合您，因为行为可能会有所不同，具体取决于平台以及您是否使用expo。

• 我个人没有使用expo ，而是在Android上测试我的应用程序

编辑：

我尝试重现该问题并将解决方案应用于expo。下图显示TouchableOpacity了按下状态。

Answer 2

您可以使用 TouchableOpacity 的 activeOpacity 属性（默认值为 0.2）并将 backfaceVisibility: 'hidden' 添加到您的 ArticleContainer 样式中。或者你可以使用 touchablewithoutfeedback，这应该可以解决问题。