# @charmy\.tech/react-native-stroke-text 中文文档

规范地址：https://npmcn.com/package/%40charmy.tech/react-native-stroke-text/

版本：1\.2\.3
npm 元数据更新时间：2025-03-27T03:04:00.811Z
中文译文更新时间：2026-11-09T10:59:42.892Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40charmy.tech/react-native-stroke-text
原文对照：https://npmcn.com/package/%40charmy.tech/react-native-stroke-text/?lang=original
项目主页：https://github.com/charmy/react-native-stroke-text#readme
源码仓库：https://github.com/charmy/react-native-stroke-text

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：71.9 kB，25 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-01-21T23:30:19.946Z
- 最新版本发布：2025-03-27T03:04:00.412Z
- 近 30 天下载量：9166（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

重现原生弦/ 底线文本

## 安装

```sh
npm install @charmy.tech/react-native-stroke-text
```

也可以使用：`pnpm add @charmy.tech/react-native-stroke-text`、`yarn add @charmy.tech/react-native-stroke-text`、`bun add @charmy.tech/react-native-stroke-text`

## README

# 重现原生弦/ 底线文本

[![npm version](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text.svg)](https://badge.fury.io/js/@charmy.tech%2Freact-native-stroke-text)

允许您在移动应用程序中添加带有中风效果的时髦文本 。 它很适合创建视觉 具有大纲效果的吸引力文本要素.

# ![](https://npmcn.com/package/%40charmy.tech/react-native-stroke-text/docs/example.jpeg)

## 安装

```bash
npm install @charmy.tech/react-native-stroke-text
# or
yarn add @charmy.tech/react-native-stroke-text
```

## 机器人

分钟 `compileSdkVersion` 必须是 `34`

## iOS系统

转到您的 ios 文件夹并运行 :

```
pod install
```

## 使用量

下面是一个简单的例子,可以让你开始使用 StrokeText:

```jsx
import React from "react";
import { StrokeText } from "@charmy.tech/react-native-stroke-text";
import { View } from "react-native";

export default function Screen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <StrokeText
        text="Test"
        fontSize={50}
        color="#000000"
        strokeColor="#c334eb"
        strokeWidth={20}
        fontFamily="Nunito-Black"
      />
    </View>
  );
}

```

### 道具

下表列出可供下列人员使用的道具: `StrokeText` 组件 :

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `text` | 字符串 | 您要显示的文本内容 . |
| `fontSize` | 编号 | 文本字体的大小, 定义文本的大小 . |
| `color` | 字符串 | 文本的颜色,可以使用任何有效的颜色格式. |
| `strokeColor` | 字符串 | 文字周围的中风颜色(外线). |
| `strokeWidth` | 编号 | 中风的宽度,决定了轮廓的厚度. |
| `fontFamily` | 字符串 | 文本的字体家族,应当匹配可用的工程字体. |
| `align` | 字符串 | 文本对齐( 默认 ): `center`(中文(简体) ) |
| `numberOfLines` | 编号 | 行数( 默认 ): `0`(中文(简体) ) |
| `ellipsis` | 布尔 | 椭圆(.)(默认: `false`(中文(简体) ) |
| `width` | 编号 | 启用椭圆的文本宽度( 默认值 : `undefined`(中文(简体) ) |

## 椭圆

```jsx
<StrokeText
  text="Lorem ipsum"
    width={150} // +
    ellipsis={true} // +
    numberOfLines={1} // +
  fontSize={32}
  color="#FFFFFF"
  strokeColor="#000000"
  strokeWidth={2}
  fontFamily="Nunito-Black"
  align="center"
/>

```

# ![](https://npmcn.com/package/%40charmy.tech/react-native-stroke-text/docs/ellipsis.jpeg)

## 自定义字体

### 裸体反应原生

创建一个 `react-native.config.js` 根目录中的文件

```javascript
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['/assets/fonts'], // or './src/assets/fonts'
};
```

### 博览会( E)[expo-font 数据](https://docs.expo.dev/versions/latest/sdk/font/)(中文(简体) )

```tsx
import { useFonts } from "expo-font";
import { Dosis_400Regular } from "@expo-google-fonts/dosis";


const [fontsLoaded, fontError] = useFonts({
  Danfo: require("./src/assets/fonts/Danfo-Regular.ttf"),
  "Dosis-Regular": Dosis_400Regular,
});
```

## 捐款

我们欢迎为改善这一构成部分而作的贡献。 请随意提出问题和改进请求.

## 许可证

请参看该项目的使用权和限制许可证.

## 常见问题

### @charmy\.tech/react-native-stroke-text 是什么？

重现原生弦/ 底线文本

### 如何安装 @charmy\.tech/react-native-stroke-text？

在项目目录运行 npm install @charmy\.tech/react-native-stroke-text，或使用 pnpm add / yarn add / bun add。

### @charmy\.tech/react-native-stroke-text 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @charmy\.tech/react-native-stroke-text 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @charmy\.tech/react-native-stroke-text 可以商用吗？

@charmy\.tech/react-native-stroke-text 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @charmy\.tech/react-native-stroke-text 的下载量有多少？

根据 npm 官方下载统计，@charmy\.tech/react-native-stroke-text 在 2026/10/10 – 2026/11/08 这 30 天内被下载 9,166 次，日均约 306 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @charmy\.tech/react-native-stroke-text 还在维护吗？

最新版本 1\.2\.3 发布于 2025/03/27（1\.6 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/01/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。