React Native UI Component - RnModal

一个功能丰富的 React Native 弹框组件，支持标题、描述、内容和按钮区域，并内置国际化支持。

特性

• 🎨 居中显示的弹框设计，支持渐变背景
• 📝 支持标题、描述和自定义内容
• 🔘 可配置的按钮区域（确认、取消按钮）
• 🌐 内置国际化支持（英语、中文、日语、意大利语）
• 🚀 支持通过 JS 直接调用显示弹框
• 🎯 完全类型化的 TypeScript 支持

安装

# 使用 npm
npm install @cniot/rn-modal

# 使用 yarn
yarn add @cniot/rn-modal

必要依赖

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

• react (>=18.0.0)
• react-native (>=0.71.0)
• expo (>=44.0.0)
• expo-linear-gradient (>=11.0.0)
• @ant-design/react-native (>=5.0.0)
• @ant-design/icons-react-native (>=2.3.0)
• react-native-gesture-handler (>=2.0.0)
• react-native-reanimated (>=2.0.0)

使用方法

基本用法

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { RnModal } from '@cniot/rn-modal';

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

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  return (
    <View>
      <Button title="显示弹框" onPress={showModal} />

      <RnModal
        visible={visible}
        title="提示"
        description="这是一个简单的弹框示例"
        onConfirm={hideModal}
        onCancel={hideModal}
      />
    </View>
  );
};

export default MyComponent;

使用 JS 直接调用

import React from 'react';
import { View, Button } from 'react-native';
import { RnModal } from '@cniot/rn-modal';

const MyComponent = () => {
  const showModal = () => {
    const close = RnModal.show({
      title: '提示',
      description: '这是通过JS直接调用显示的弹框',
      onConfirm: () => {
        console.log('确认按钮被点击');
        close(); // 调用返回的函数关闭弹框
      },
      onCancel: () => {
        console.log('取消按钮被点击');
        close(); // 调用返回的函数关闭弹框
      },
    });
  };

  return (
    <View>
      <Button title="显示弹框" onPress={showModal} />
    </View>
  );
};

自定义内容

import React, { useState } from 'react';
import { View, Button, Text, TextInput } from 'react-native';
import { RnModal } from '@cniot/rn-modal';

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

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  const customContent = (
    <View style={{ padding: 10 }}>
      <Text>请输入您的名字：</Text>
      <TextInput
        value={value}
        onChangeText={setValue}
        style={{ borderWidth: 1, padding: 8, marginTop: 10 }}
      />
    </View>
  );

  return (
    <View>
      <Button title="显示自定义弹框" onPress={showModal} />

      <RnModal
        visible={visible}
        title="自定义内容"
        content={customContent}
        onConfirm={hideModal}
        onCancel={hideModal}
      />
    </View>
  );
};

国际化支持

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

与业务项目的 i18next 集成

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

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

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        modal: {
          confirm: '确认操作', // 这将覆盖组件内部的翻译
          // 其他翻译...
        },
      },
    },
    // 其他语言...
  },
  lng: 'zh',
  fallbackLng: 'en',
});

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

API 参考

RnModal Props

| 属性 | 类型 | 默认值 | 描述 | | ------------------- | -------------------- | --------- | ------------------------ | | visible | boolean | false | 控制弹框是否可见 | | title | string | - | 弹框标题 | | description | string | - | 弹框描述文本 | | content | React.ReactNode | - | 弹框内容 | | confirmText | string | 'confirm' | 确认按钮文本 | | cancelText | string | 'cancel' | 取消按钮文本 | | showConfirmButton | boolean | true | 是否显示确认按钮 | | showCancelButton | boolean | true | 是否显示取消按钮 | | showArrow | boolean | true | 是否在确认按钮上显示箭头 | | onConfirm | () => void | - | 点击确认按钮的回调函数 | | onCancel | () => void | - | 点击取消按钮的回调函数 | | closeOnOverlayClick | boolean | true | 点击蒙层是否关闭弹框 | | containerStyle | StyleProp | - | 弹框容器的附加样式 | | titleStyle | StyleProp | - | 弹框标题的附加样式 | | descriptionStyle | StyleProp | - | 弹框描述的附加样式 | | confirmButtonStyle | StyleProp | - | 确认按钮的附加样式 | | confirmTextStyle | StyleProp | - | 确认按钮文本的附加样式 | | cancelButtonStyle | StyleProp | - | 取消按钮的附加样式 | | cancelTextStyle | StyleProp | - | 取消按钮文本的附加样式 | | arrowStyle | StyleProp | - | 箭头的附加样式 |

RnModal 静态方法

| 方法 | 参数 | 返回值 | 描述 | | ---- | ------------------------- | ---------- | ---------------------------- | | show | ModalProps (不含 visible) | () => void | 显示弹框，返回关闭弹框的函数 |

注意事项

• 当 closeOnOverlayClick 为 true 时，点击蒙层将关闭弹框
• 自定义样式将覆盖默认样式
• 组件内置的国际化支持仅包含基本的弹框文本，如需更多翻译，请在业务项目中注入
• 组件使用了 expo-linear-gradient 实现渐变效果，请确保项目中已安装此依赖

许可证

MIT