@react-native-ohos/react-native-dialog

v9.3.1

Published

23 days ago

A flexible react-native dialog

Downloads

181

模板版本：v0.4.2

本项目基于 react-native-dialog 开发。

该第三方库支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-dialog，版本所属关系如下：

| 三方库名称 | 三方库版本 | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址 | | ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- | | @react-native-ohos/react-native-dialog | ~ 9.3.1（开发中） | Github Releases | 0.72./ 0.77./ 0.82./0.84. | 否 | API12+ | 9.3.0 | Npm Address |

简介

react-native-dialog 是一个用于 React Native 的轻量级弹窗组件库，用来快速创建 Alert、确认框、输入框、提示框等对话框 UI

安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-dialog

yarn

yarn add @react-native-ohos/react-native-dialog

下面的代码展示了这个库的基本使用场景：

import React, { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import Dialog from "react-native-dialog";

export default function App() {
  const [visible, setVisible] = useState(false);

  const showDialog = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleDelete = () => {
    // 用户点击了"删除"按钮，可以在此处执行自定义逻辑
    // ...你的逻辑
    setVisible(false);
  };

  return (
    <View style={styles.container}>
      <Button title="显示对话框" onPress={showDialog} />
      <Dialog.Container visible={visible}>
        <Dialog.Title>删除账户</Dialog.Title>
        <Dialog.Description>
          确定要删除此账户吗？此操作不可撤销。
        </Dialog.Description>
        <Dialog.Button label="取消" onPress={handleCancel} />
        <Dialog.Button label="删除" onPress={handleDelete} />
      </Dialog.Container>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

在以下版本验证通过：

RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); DevEco Studio 6.0.0.868; ROM: 5.0.0.107;
RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.120 SP7;
RNOH: 0.84.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

API

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；No 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Dialog.Container props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | visible | 是否显示对话框 | boolean | 是 | iOS/Android | Yes | | children | 对话框子内容 | ReactNode | 是 | iOS/Android | Yes | | blurComponentIOS | iOS 平台的自定义模糊背景组件 | ReactNode | 否 | iOS | No | | contentStyle | 对话框内容区域的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | headerStyle | 对话框头部（标题+描述区域）的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | footerStyle | 对话框底部（按钮区域）的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | buttonSeparatorStyle | 按钮分隔线的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | blurStyle | iOS 默认模糊背景的自定义样式 | StyleProp<ViewStyle> | 否 | iOS | No | | verticalButtons | 是否垂直排列按钮 | boolean | 否 | iOS/Android | Yes | | onBackdropPress | 点击背景遮罩的回调 | () => void | 否 | iOS/Android | Yes | | onRequestClose | Android 硬件返回键或 Apple TV 菜单键按下时的回调 | () => void | 否 | Android/iOS | Yes | | keyboardVerticalOffset | iOS 键盘避让偏移量 | number | 否 | iOS | No | | useNativeDriver | 是否使用原生动画驱动 | boolean | 否 | iOS/Android | Yes |

Dialog.Title props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | children | 标题文本 | string | 是 | iOS/Android | Yes |

Dialog.Description props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | children | 描述文本 | string | 是 | iOS/Android | Yes |

Dialog.Button props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | label | 按钮标签文本 | ReactNode | 是 | iOS/Android | Yes | | color | 标签颜色，iOS 默认 #007ff9，Android 默认 #169689 | ColorValue | 否 | iOS/Android | Yes | | bold | 是否以粗体显示标签 | boolean | 否 | iOS/Android | Yes | | disabled | 是否禁用按钮 | boolean | 否 | iOS/Android | Yes | | onPress | 按钮点击回调 | () => void | 是 | iOS/Android | Yes |

Dialog.Input props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | label | 输入框的浮动标签文本 | ReactNode | 否 | iOS/Android | Yes | | wrapperStyle | 输入框外层容器的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | textInputRef | 输入框的 ref 引用 | LegacyRef<TextInput> | 否 | iOS/Android | Yes | | unstableLabelStyle | 标签的自定义样式（可能在未来版本中移除） | StyleProp<TextStyle> | 否 | iOS/Android | Yes |

Dialog.CodeInput props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | style | 整体容器的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | wrapperStyle | 外层容器的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | digitContainerStyle | 单个数字容器的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | digitContainerFocusedStyle | 聚焦时数字容器的自定义样式 | StyleProp<ViewStyle> | 否 | iOS/Android | Yes | | digitStyle | 数字文本的自定义样式 | StyleProp<TextStyle> | 否 | iOS/Android | Yes | | codeLength | 验证码总位数 | number | 否 | iOS/Android | Yes | | onCodeChange | 验证码输入变化时的回调 | (code: string) => void | 否 | iOS/Android | Yes |

Dialog.Switch props

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | label | 开关旁边的描述文本 | ReactNode | 否 | iOS/Android | Yes | | unstableLabelStyle | 标签的自定义样式（可能在未来版本中移除） | StyleProp<TextStyle> | 否 | iOS/Android | Yes |

遗留问题

其他

目录结构


├── src                       # RN 代码
│   └── index.ts              # 入口文件
│   └── Button.tsx            # Dialog.Button 组件
│   └── CodeInput.tsx         # Dialog.CodeInput 组件
│   └── Container.tsx         # Dialog.Container 组件
│   └── Description.tsx       # Dialog.Description 组件
│   └── Input.tsx             # Dialog.Input 组件
│   └── Modal.tsx             # 弹窗模态层组件
│   └── Switch.tsx            # Dialog.Switch 组件
│   └── Title.tsx             # Dialog.Title 组件
│   └── useTheme.ts           # 主题 hook
├── README_en.md           # 英文文档
├── README.md   # 中文文档

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。