反应原生插入阴影效果

Question

我有一个底部导航标签栏的 Figma 示例（上图）。它包括两个显示有focused效果的。如您所见，当按钮被按下（聚焦）时，它有一个插入阴影（这在 RN 的这一点上似乎是不可能实现的），另一个有一个提升效果。假设他们会在另一个按钮聚焦不足时切换。

问题在于为我实现插入阴影。我已经对这个问题应用了几种方法，但找不到最佳解决方案。因为一些例子表明有可能达到一个盒子（矩形）的插入阴影；我发现圆形按钮不可能达到相同的结果。

我尝试过的方法：

1. 尝试添加正常阴影（高程效果）。这适用于elevated按钮，但不能应用于按钮focused。（我使用了一些像Ether这样的阴影生成器）
2. 尝试react-native-svg哪个可以让我们构建一个具有所有属性的自定义 XML/CSS 文件（除了inset，因为它不受支持？）
3. 尝试世博线性渐变。我试图从 [x:0,y:1] 到 [x:1,y:0] - 颜色对角线 - [黑色 (10%), 灰色 (40%), 浅灰色 (40%) , 白色 (10%)]。它看起来几乎是正确的，但它仍然不像我预期的那样径向。
4. 尝试条件渲染。我知道根据条件渲染图像是一种糟糕的体验，但我尝试在 GIMP 中创建两个图像（一个有聚焦效果，一个没有），但老实说，我无法用圆形图像做到这一点......

如果有人可以提出任何好的解决方案或在正确的方向上捏我，我将不胜感激。

Answer 1

试试这个库react-native-neomorph-shadows



像这样的东西

import { Neomorph } from 'react-native-neomorph-shadows';

...

<Neomorph
  inner // <- enable shadow inside of neomorph
  swapShadows // <- change zIndex of each shadow color
  style={{
    shadowRadius: 10,
    borderRadius: 75,
    backgroundColor: '#DDDDDD',
    width: 150,
    height: 150,
  }}
>
</Neomorph>

更新：世博会支持

正如@denistepp 评论该库不与世博
会合作文档说

重要提示：这个库，starting from v1.0.0, no longer supports expo因为 React Native Art 库最近被 expo 弃用了。

但你仍然有机会使用版本 min v1.0.0

我用这个依赖创建了这个小吃

"react-native-svg": "12.1.1",
"react-native-neomorph-shadows": "0.0.8"

在这里可以找到 v0.0.8 版本的文档

结果

完整代码与 expo last version v42 一起使用

import { Text, View, StyleSheet } from 'react-native';
import { ShadowBox, NeomorphBox } from 'react-native-neomorph-shadows';

export default function App() {

    return (
      <View style={{
        flex: 1,
        flexDirection : "row",
        alignItems: 'center',
        justifyContent: 'space-around',
        backgroundColor: '#fcfcfc',
      }}>
        
        <ShadowBox
          inner
          useSvg
          style={{
            shadowOffset: {width: 3, height: 3}, 
            shadowOpacity: .8,
            shadowColor: "#ddd",
            shadowRadius: 3,
            borderRadius: 35,
            backgroundColor: '#fff',
            width: 70,
            height: 70,
          }}>
        </ShadowBox>

        <ShadowBox
          useSvg
          style={{
            shadowOffset: {width: 4, height: 4}, 
            shadowOpacity: .8,
            shadowColor: "#e6e6e6",
            shadowRadius: 3,
            borderRadius: 35,
            backgroundColor: '#fff',
            width: 70,
            height: 70,
          }}>
        </ShadowBox>
      </View>
    );
  
}