React Native 嵌入阴影效果

Question

我有一个底部导航标签栏的 Figma 示例（上图）。它包括两个以focused 效果显示的按钮。正如你所看到的，当按钮被按下（聚焦）时，它有一个嵌入的阴影（这在 RN 中似乎无法实现），另一个有一个高程效果。假设当另一个按钮焦点不足时他们会切换。

问题在于为我实现嵌入阴影。我已经对这个问题应用了几种方法，但找不到最佳解决方案。正如some of the examples 所示，有可能到达一个盒子（矩形）的嵌入阴影；我发现圆形按钮不可能达到同样的效果。

我尝试过的方法：

1. 尝试添加正常阴影（高程效果）。这适用于elevated 按钮，但不能应用于focused 按钮。 （我使用了一些阴影生成器，例如 this one by Ether）
2. 尝试react-native-svg，这将允许我们构建具有所有属性的自定义 XML/CSS 文件（inset 除外，因为它不受支持？）
3. 正在尝试Expo Linear Gradient。我试图从 [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 评论此库不适用于 expo
docs 说

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

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

我用这个依赖创建了这个snack

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

查看可以找到 v0.0.8 版本的文档here

结果

完整代码适用于 expo 最新版本 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>
    );
  
}