# @chatwoot/react-native-widget 中文文档

规范地址：https://npmcn.com/package/%40chatwoot/react-native-widget/

版本：0\.0\.21
npm 元数据更新时间：2024-10-14T12:43:18.614Z
中文译文更新时间：2026-11-09T11:31:32.525Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：967 kB，28 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@react-native-async-storage/async-storage \>=1\.23\.1，react \*，react-native \*，react-native-webview \>=13\.8\.6
- 首次发布：2021-03-22T09:07:17.873Z
- 最新版本发布：2024-10-14T12:43:18.353Z
- 近 30 天下载量：29696（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 0 个）

## 中文简介

Chatwoot 的原生部件

## 安装

```sh
npm install @chatwoot/react-native-widget
```

也可以使用：`pnpm add @chatwoot/react-native-widget`、`yarn add @chatwoot/react-native-widget`、`bun add @chatwoot/react-native-widget`

## README

# 聊天- 反应- 本地化- 窗口

![](https://img.shields.io/npm/v/@chatwoot/react-native-widget?style=flat) ![](https://img.shields.io/npm/dt/@chatwoot/react-native-widget.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com/) ![](https://img.shields.io/npm/l/@chatwoot/@chatwoot/react-native-widget)

-   **支持的 Chatwoot 版本 :** 2.1.6.0+ (单位:千美元)

![screenshot](https://user-images.githubusercontent.com/12408980/203909820-938136a6-bf5b-433e-9f68-d7f28a1303be.png)

### 安装

使用纱线或 npm 这样安装库 :

```sh
yarn add @chatwoot/react-native-widget
```

或

```sh
npm install --save @chatwoot/react-native-widget
```

这个库取决于 [反应-本地-网络视图](https://www.npmjs.com/package/react-native-webview) 财务报告和审定财务报表 [同步存储](https://github.com/react-native-async-storage/async-storage)请遵照文件中的指示.

### iOS 安装

如果使用回放原生版本 > 60.0,则相对直截了当.

```sh
cd ios && pod install
```

### 如何使用

1.  通过遵循此处描述的步骤在聊天室服务器中创建一个网站频道 [https://www.chatwoot.com/docs/channels/website (中文(简体) )](https://www.chatwoot.com/docs/channels/website)
2.  替换 `websiteToken` 螺旋桨和 `baseUrl`

```

import React, { useState } from 'react';

import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';

import ChatWootWidget from '@chatwoot/react-native-widget';

const App = () => {
  const [showWidget, toggleWidget] = useState(false);
  const user = {
    identifier: 'john@gmail.com',
    name: 'John Samuel',
    avatar_url: '',
    email: 'john@gmail.com',
    identifier_hash: '',
  };
  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const websiteToken = 'WEBSITE_TOKEN';
  const baseUrl = 'CHATWOOT_INSTALLATION_URL';
  const locale = 'en';
  const colorScheme='dark'

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>Open widget</Text>
        </TouchableOpacity>
      </View>
      {
        showWidget&&
          <ChatWootWidget
            websiteToken={websiteToken}
            locale={locale}
            baseUrl={baseUrl}
            closeModal={() => toggleWidget(false)}
            isModalVisible={showWidget}
            user={user}
            customAttributes={customAttributes}
            colorScheme={colorScheme}
          />
      }

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    height: 48,
    marginTop: 32,
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: '#1F93FF',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#fff',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    fontWeight: '600',
    fontSize: 16,
    paddingRight: 10,
  },
});

export default App;

```

结束了!

整个例子在 `/example` 文件夹.

### 道具

| 名称 | 默认 | 类型 | 说明 |
| --- | --- | --- | --- |
| 基数Url | \- 说吧 | 字符串 | Chatwoot 安装 URL |
| 网站Token | \- 说吧 | 字符串 | 网站频道代号 |
| 颜色方案 | 光线 | 字符串 | 部件颜色方案( 浅/ 暗/ 自动) |
| 语言 | 内 | 字符串 | 语言 |
| 是 Modal 可视性 | 虚假 | 布尔 | 部件是否可见 |
| 关闭 Modal | \- 说吧 | 函数 | 闭幕活动 |
| 用户 | {} | 对象 | 用户信息, 如电子邮件、 用户名和 avatar url |
| 自定义属性 | {} | 对象 | 关于客户的补充资料 |

## 反馈贡献( A)

请给我们回馈 [微博](https://twitter.com/chatwootapp) 或者说 [提交问题](https://github.com/chatwoot/chatwoot-mobile-app/issues)。 。 。 .

如果你有什么想谈的 请随意加入我们 [解析器](https://discord.gg/cJXdrwS) 说话!

_欢呼_ 2017-2023 Chatwoot Inc-根据麻省理工学院许可证发布.

## 常见问题

### @chatwoot/react-native-widget 是什么？

Chatwoot 的原生部件

### 如何安装 @chatwoot/react-native-widget？

在项目目录运行 npm install @chatwoot/react-native-widget，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@react-native-async-storage/async-storage（\>=1\.23\.1）、react（\*）、react-native（\*）、react-native-webview（\>=13\.8\.6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chatwoot/react-native-widget 支持 TypeScript 吗？

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

### @chatwoot/react-native-widget 支持 ESM 还是 CommonJS？

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

### @chatwoot/react-native-widget 可以商用吗？

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

### @chatwoot/react-native-widget 的下载量有多少？

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

### @chatwoot/react-native-widget 还在维护吗？

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