React Native UI - RNQRCodeModal

一个美观实用的 React Native 二维码弹层组件，支持自定义样式和国际化。

特性

- 🖼️ 在屏幕中央显示美观的二维码弹层
- 🔄 支持自定义二维码内容、标题和描述文本
- 🌐 内置国际化支持（英语、中文、日语、意大利语）
- 🎨 支持自定义样式和主题
- 🔍 轻量级设计，最小化依赖
- 👆 支持点击蒙层关闭弹层
- 🎯 完全类型化的 TypeScript 支持

安装

``bash


使用 npm

npm install @cniot/rn-atm-code

使用 yarn

yarn add @cniot/rn-atm-code
`

必要依赖

本组件依赖以下库：

`bash


使用 npm

npm install react-native-qrcode-svg

使用 yarn

yarn add react-native-qrcode-svg
`

此外，本组件库依赖以下基础包，这些包通常在 React Native 项目中已经存在：

- react (>=16.8.0)
- react-native (>=0.60.0)

使用方法

$3

`jsx
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { RNQRCodeModal } from '@cniot/rn-atm-code';

const MyComponent = () => {
const [visible, setVisible] = useState(false);

return (

setVisible(true)} />

visible={visible}
qrValue="https://example.com"
title="扫描二维码"
description="扫描此二维码获取更多详情"
onClose={() => setVisible(false)}
/>

);
};

export default MyComponent;
`

$3

`jsx
visible={visible}
qrValue="https://example.com"
title="扫描二维码"
description="扫描此二维码获取更多详情"
qrSize={250}
qrColor="#003D78"
qrBackgroundColor="#F2F2F7"
onClose={() => setVisible(false)}
/>
`

$3

`jsx
visible={visible}
qrValue="https://example.com"
title="扫描二维码"
description="扫描此二维码获取更多详情"
containerStyle={{ backgroundColor: '#F8F8F8', borderRadius: 20 }}
qrContainerStyle={{ borderColor: '#003D78', borderWidth: 2 }}
titleStyle={{ color: '#003D78', fontSize: 20 }}
descriptionStyle={{ color: '#666666' }}
onClose={() => setVisible(false)}
/>
`

国际化支持

本组件内置了国际化支持，可以与业务项目中的 i18next 集成使用。组件内部包含英语、中文、日语和意大利语的基本翻译。

$3

组件会自动检测并使用业务项目中注入的 i18next 实例。如果业务项目中已经设置了 i18next，组件将使用业务项目的翻译资源，同时业务项目的翻译会覆盖组件内部的翻译。

`jsx
// 业务项目中的 i18next 配置
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
.use(initReactI18next)
.init({
resources: {
en: {
translation: {
qrCodeModal: {
scanQRCode: 'Custom Scan QR Code Text', // 这将覆盖组件内部的翻译
scanForDetails: 'Custom description text'
// 其他翻译...
}
}
},
// 其他语言...
},
lng: 'zh',
fallbackLng: 'en',
});

// 将 i18next 实例暴露给全局，以便组件可以访问
window.i18next = i18n; // 在 Web 环境
global.i18next = i18n; // 在 React Native 环境
global.i18nextLng = 'zh'; // 设置当前语言
`

$3

如果业务项目没有注入 i18next 实例，组件将使用内置的翻译资源：

`jsx
import { RNQRCodeModal, useTranslation } from '@cniot/rn-atm-code';

const MyComponent = () => {
const { t } = useTranslation();
const [visible, setVisible] = useState(false);

return (
<>


setVisible(true)} />
visible={visible}
qrValue="https://example.com"
title="scanQRCode" // 使用翻译键
description="scanForDetails" // 使用翻译键
onClose={() => setVisible(false)}
/>

);
};
`

API 参考

$3

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| visible | boolean | false | 控制弹层是否可见 |
| qrValue | string | '' | 二维码内容文本 |
| title | string | - | 弹层标题 |
| description | string | - | 弹层描述文本 |
| qrSize | number | 200 | 二维码尺寸 |
| qrColor | string | '#000000' | 二维码颜色 |
| qrBackgroundColor | string | '#FFFFFF' | 二维码背景色 |
| containerStyle | StyleProp | - | 弹层容器样式 |
| qrContainerStyle | StyleProp | - | 二维码容器样式 |
| titleStyle | StyleProp | - | 标题样式 |
| descriptionStyle | StyleProp | - | 描述文本样式 |
| onClose | () => void | - | 点击蒙层关闭弹窗时的回调函数 |
| closeOnOverlayPress | boolean | true | 是否允许点击蒙层关闭弹窗 |

注意事项

1. 确保在使用前安装必要的依赖 react-native-qrcode-svg
2. 组件默认使用内置的国际化文本，但也可以通过外部注入的 i18next 实例覆盖这些文本
3. 为了避免国际化键名冲突，所有组件内部的国际化键都以 qrCodeModal. 为前缀
4. 弹层中的二维码会根据提供的 qrValue` 自动生成，无需手动创建二维码图像

许可证

MIT