React Native UI - RNQRCodeModal

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

特性

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

安装

# 使用 npm
npm install @cniot/rn-atm-code

# 使用 yarn
yarn add @cniot/rn-atm-code

必要依赖

本组件依赖以下库：

# 使用 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)

使用方法

基本用法

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 (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="显示二维码" onPress={() => setVisible(true)} />
      
      <RNQRCodeModal
        visible={visible}
        qrValue="https://example.com"
        title="扫描二维码"
        description="扫描此二维码获取更多详情"
        onClose={() => setVisible(false)}
      />
    </View>
  );
};

export default MyComponent;

自定义二维码样式

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

自定义容器样式

<RNQRCodeModal
  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 集成使用。组件内部包含英语、中文、日语和意大利语的基本翻译。

与业务项目的 i18next 集成

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

// 业务项目中的 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'; // 设置当前语言

使用组件内置的翻译

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

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

const MyComponent = () => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
  
  return (
    <>
      <Button title="显示" onPress={() => setVisible(true)} />
      <RNQRCodeModal
        visible={visible}
        qrValue="https://example.com"
        title="scanQRCode" // 使用翻译键
        description="scanForDetails" // 使用翻译键
        onClose={() => setVisible(false)}
      />
    </>
  );
};

API 参考

RNQRCodeModal Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | 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