From 15281a3c1d57832d5cdeb1bdb495516386c5a074 Mon Sep 17 00:00:00 2001 From: xiaoyange Date: Sun, 28 Apr 2024 16:53:22 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9KE39]=20=E6=96=B0=E5=A2=9Ereact-n?= =?UTF-8?q?ative-feather=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + zh-cn/README.md | 1 + zh-cn/react-native-feather.md | 104 ++++++++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 zh-cn/react-native-feather.md diff --git a/README.md b/README.md index 2f1789cc..46f90cad 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,7 @@ | 121 | [styled-system](https://github.com/react-native-picker/picker "https://github.com/react-native-picker/picker") | 5.1.5 | \- | \- | [链接](/zh-cn/styled-system) | | 122 | [react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors) | 7.2.1 | \- | [@react-native-oh-tpl/react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors/releases) | [链接](/zh-cn/react-native-sensors) | | 123 | [react-native-sortable-list](https://github.com/gitim/react-native-sortable-list) | 0.0.25 | \- | [@react-native-oh-tpl/react-native-sortable-list](https://github.com/react-native-oh-library/react-native-sortable-list) | [链接](/zh-cn/react-native-sortable-list) | +| 124 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather) | 1.1.2 | \- | \- | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-feather) | ## 社区 diff --git a/zh-cn/README.md b/zh-cn/README.md index ef1c8dac..e20b3f6c 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -143,6 +143,7 @@ | 121 | [styled-system](https://github.com/react-native-picker/picker "https://github.com/react-native-picker/picker") | 5.1.5 | \- | \- | [链接](/zh-cn/styled-system) | | 122 | [react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors) | 7.2.1 | \- | [@react-native-oh-tpl/react-native-sensors](https://github.com/react-native-oh-library/react-native-sensors/releases) | [链接](/zh-cn/react-native-sensors) | | 123 | [react-native-sortable-list](https://github.com/gitim/react-native-sortable-list) | 0.0.25 | \- | [@react-native-oh-tpl/react-native-sortable-list](https://github.com/react-native-oh-library/react-native-sortable-list) | [链接](/zh-cn/react-native-sortable-list) | +| 124 | [react-native-feather](https://github.com/yigithanyucedag/react-native-feather) | 1.1.2 | \- | | [链接](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-feather) | ## 社区 diff --git a/zh-cn/react-native-feather.md b/zh-cn/react-native-feather.md new file mode 100644 index 00000000..a0b3da3b --- /dev/null +++ b/zh-cn/react-native-feather.md @@ -0,0 +1,104 @@ +> 模板版本：v0.1.3 + +

+

react-native-feather

+

+

+ + License + + +

+ + + + + +> [!TIP] [Github 地址](https://github.com/yigithanyucedag/react-native-feather) + +## 安装与使用 + + + +#### **npm** + +```bash +npm i react-native-feather +``` + +#### **yarn** + +```bash +yarn add react-native-feather +``` + + + +下面的代码展示了这个库的基本使用场景： + +此库可以使用的[图标列表](https://feathericons.com/) + +>[!WARNING] 使用时 import 的库名不变。且该库强依赖[@react-native-oh-tpl/react-native-svg](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg)，请在使用前，安装svg库 + +```js +import React from 'react'; +import {Text, ScrollView } from 'react-native'; +import * as Icon from "react-native-feather"; +//第二种引入方式，可以直接通过组件名称引入 +import { Check } from "react-native-feather"; + + +const FeatherExample = () => { + return ( + + react-native-feather库只是对svg图进行处理的库,以下展示的demo,均只有图片,没有绑定点击事件 + 电池,边线红色,绿色填充,width=150,height=150 + + 菜单栏,边线绿色,宽高默认为25 + + 播放图标,边线默认为当前颜色,填充色为蓝色,宽高为50 + + + 第二种使用方法：对号,颜色为红色,width和height为32 + + + ); +}; + +export default FeatherExample; +``` + +## 约束与限制 + +### 兼容性 + +1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：204.1.0.59; +2. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18; + +## 属性 + +所有[SVG属性](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg)均可使用 + +### feather + +该库为UI组件库，通过配置属性标签，实现对应的功能。 + +| Prop | Description | Default | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | ------------ | ----------------- | +| width | Width of the icon. | 24 | yes | +| height | Height of the icon. | 24 | yes | +| stroke | The stroke prop refers to the color outline the icon. | currentColor | yes | +| strokeWidth | The strokeWidth prop specifies the width of the outline on the icon. | 2 | yes | +| fill | The fill prop refers to the color inside the icon. | none | yes | + + + +## 遗留问题 + +## 其他 + +以下事项与原库保持一致需注意遵循： + +1. 在使用该库前，请保证已经安装 [`react-native-svg`](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg)。 +2. 此组件包含所有 [`react-native-svg`](https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg) 兼容的所有 Feather 图标。 +3. 基于Feather 图标库版本为V4.28.0。 \ No newline at end of file -- Gitee