# react-native-shadow

**Repository Path**: rn-10/react-native-shadow

## Basic Information

- **Project Name**: react-native-shadow
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 文档模板：v0.4.1

# <center>react-native-shadow</center>

本项目基于 [react-native-shadow](https://github.com/879479119/react-native-shadow) 开发。

| 三方库名称    | 三方库版本    | 发布信息     | 支持RN版本    | Autolink     | 编译API版本     | 社区基线版本    | npm地址                |
| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |
| @react-native-ohos/react-native-shadow |  ~ 1.2.3    | [Github Releases](https://gitcode.com/OpenHarmony-RN/rntpc_react-native-shadow/releases?presetConfig={%22tags%22:3,%22release%22:0}) | 0.61.* | 否 | API12+ | 1.2.2 | [Npm Address](https://www.npmjs.com/package/react-native-shadow) |

## 简介

react-native-shadow 是一个 SVG 阴影组件，为 React Native 提供类似阴影效果。该库通过 SVG 实现阴影效果，提供了 BoxShadow 和 BorderShadow 两种组件。<br/>

## 下载安装

进入到工程目录并输入以下命令：

**npm**

```bash
npm install @react-native-ohos/react-native-shadow
```

**yarn**

```bash
yarn add @react-native-ohos/react-native-shadow
```
## Link

|                                      | 是否支持autolink | RN框架版本 |
|--------------------------------------|-----------------|------------|
| ~ 1.2.3                               |  No              |  0.61    |

本库HarmonyOS侧实现依赖 react-native-svg 的原生端代码，如已在HarmonyOS工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照[react-native-svg 文档](/react-native-svg-capi.md#link)进行引入

## 约束与限制

### 兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.61; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

## 使用示例

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名为 `react-native-shadow`。

```javascript
import React, { Component } from 'react'
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
} from 'react-native';
import { BoxShadow, BorderShadow } from 'react-native-shadow';

const ItemCard = ({ title, width, height, shadowColor, x, y, opacity, border, radius, color }) => (
  <BoxShadow
    setting={{
      width,
      height,
      color: shadowColor || "#000",
      border: border || 3,
      radius: radius || 8,
      opacity: opacity || 0.2,
      x: x || 0,
      y: y || 2
    }}>
    <View style={[styles.itemCard, { width, height, borderRadius: 8 }]}>
      <Text style={styles.itemTitle}>{title}</Text>
      <Text style={styles.itemSubtitle}>x: {x}</Text>
      <Text style={styles.itemSubtitle}>y: {y}</Text>
      <Text style={styles.itemSubtitle}>width: {width}</Text>
      <Text style={styles.itemSubtitle}>height: {height}</Text>
      <Text style={styles.itemSubtitle}>radius: {radius}</Text>
      <Text style={styles.itemSubtitle}>color: {shadowColor}</Text>
      <Text style={styles.itemSubtitle}>opacity: {opacity}</Text>
      <Text style={styles.itemSubtitle}>border: {border}</Text>
    </View>
  </BoxShadow>
)
export default class ShadowDemoPage extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* BoxShadow */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>BoxShadow</Text>
          <View style={styles.row}>
            <ItemCard
              title="绿色阴影"
              x={10}
              y={10}
              width={120}
              height={180}
              opacity={0.5}
              radius={20}
              border={10}
              shadowColor="#06d6a0"
            />
            <ItemCard
              title="黄色阴影"
              x={20}
              y={20}
              width={120}
              height={180}
              opacity={1}
              radius={40}
              border={20}
              shadowColor="#ffd166"
            />
          </View>
        </View>

        {/* BorderShadow */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>BoxShadow</Text>
          <View style={styles.card}>
            <BorderShadow
              setting={{
                width: 150,
                color: "#ffd166",
                border: 10,
                opacity: 1,
                side: "bottom",
                inset: true,
                style: { marginBottom: 15 }
              }}
            >
              <View style={styles.cardContent} backgroundColor="#F5F5F5">
                <Text style={styles.cardText}>
                  底部阴影
                </Text>
                <Text style={styles.borderSubtitle} marginTop={5}>
                  {`width: 150\ncolor: "#ffd166"\nborder: 10\nopacity: 1\nside: "bottom"\ninset: false`}
                </Text>
              </View>
            </BorderShadow>
          </View>

        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  scrollContent: {
    padding: 16
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 12
  },
  row: {
    marginBottom: 24,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  itemCard: {
    backgroundColor: '#FFF',
    padding: 12,
    justifyContent: 'center'
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  },
  itemSubtitle: {
    fontSize: 12,
    color: '#999'
  },

  borderSubtitle: {
    fontSize: 12,
    color: '#000'
  },
  cardText: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  },
  card: {
    width: 300,
    backgroundColor: '#FFF',
    marginBottom: 16,
    borderRadius: 8,
    overflow: 'hidden'
  },
  cardContent: {
    width: 300,
    height: 145,
    borderRadius: 8,
    padding: 16
  },
})
```

## 使用说明

### BoxShadow 使用
```javascript
import { BoxShadow } from 'react-native-shadow'

const shadowOpt = {
	width:100,
	height:100,          
	color:"#000",
	border:2,
	radius:3,
	opacity:0.2,
	x:0,
	y:3,
	style:{ marginVertical:5 }
}

<BoxShadow setting={ shadowOpt }>
	<View style={{ width:100, height:100 }}/>
</BoxShadow>
```

### BorderShadow 使用
```javascript
import {BorderShadow} from 'react-native-shadow'

const shadowOpt = {
	width:100,
	color:"#000",
	border:2,
	opacity:0.2,
	style:{ marginVertical:5 },
	inset:false
}

<BorderShadow setting={ shadowOpt }>
	<View style={{ width:100, height:100 }}/>
</BorderShadow>
```

## 接口说明

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS平台支持"列为 yes 表示 HarmonyOS平台支持 该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 组件
| 名称 | 参数类型 | 必填 | 平台 | HarmonyOS平台支持 | 描述 |
|------------|------------|----------------------|------|-----|----------------|
| BoxShadow| BoxShadowProps | Yes | Android/IOS | Yes | BoxShadow 组件 |
| BorderShadow | BorderShadowProps | Yes | Android/IOS | Yes | BorderShadow 组件 |

### 属性
#### BoxShadowProps

| 名称                           | 参数类型          | 必填          | 平台   | HarmonyOS平台支持    | 描述 |
|------------------------------|--------------------|---------------|------|------------------|---------------|
| width                        | number             | No            | Android/IOS | Yes              | 宽度 |
| height                       | number             | No            | Android/IOS | Yes              | 高度 |
| color                        | string             | No            | Android/IOS | Yes              | 阴影颜色|
| border                       | number             | No            | Android/IOS | Yes              | 阴影宽度|
| radius                       | number             | No            | Android/IOS | Yes              | 阴影圆角值 |
| opacity                      | number             | No            | Android/IOS | Yes              | 阴影透明度 |
| x                            | number             | No            | Android/IOS | Yes              | X 方向偏移量 |
| y                            | number             | No            | Android/IOS | Yes              | Y 方向偏移量 |
| style                        | StyleProp<ViewStyle> | No          | Android/IOS | Yes              | 包装盒的样式 |

#### BorderShadowProps

| 名称                           | 参数类型          |         必填            | 平台   | OpenHarmony平台支持    | 描述 |
|------------------------------|--------------------|---------------|------|------------------|---------------|
| width                        | number             | No           | Android/IOS | Yes              | 阴影宽度 |
| color                        | string             | No           | Android/IOS | Yes              | 阴影颜色 |
| border                       | number             | No           | Android/IOS | Yes              | 阴影宽度 |
| opacity                      | number             | No           | Android/IOS | Yes              | 阴影透明度 |
| style                        | StyleProp<ViewStyle> | No         | Android/IOS | Yes              | 包装盒的样式 |
| side                         | "top"/"bottom"     | Yes          | Android/IOS | Yes              | 阴影显示位置 |
| inset                        | boolean            | No           | Android/IOS | Yes              | 是否为内嵌阴影 |

## 遗留问题

## 其他

## 目录结构
````
/react-native-shadow  # 项目根目录
├── example  # 示例工程
├── lib
│    └─ BoxShadow.js  # BoxShadow组件功能实现
│    └─ BorderShadow.js # BorderShadow件功能实现
├── index.js  # 入口文件 
├── README.md  # 中文安装使用方法
├── README_en.md  # 英文安装使用方法                   
````

## 贡献代码

使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/OpenHarmony-RN/rntpc_react-native-shadow/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/OpenHarmony-RN/rntpc_react-native-shadow/pulls) 。

## 开源协议

本项目基于 [MIT License](https://github.com/879479119/react-native-shadow/blob/master/LICENSE) ，请自由地享受和参与开源。