# ty-react-native-modal
**Repository Path**: rn-mi/ty-react-native-modal
## Basic Information
- **Project Name**: ty-react-native-modal
- **Description**: TY项目react-native-modal仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-01
- **Last Updated**: 2025-08-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 模板版本：v13.0.1-0.0.1
react-native-modal
> [!TIP][git 地址](https://gitee.com/rn-mi/ty-react-native-modal)
## 安装与使用
进入到工程目录并输入以下命令：
#### **npm**
```bash
npm install @tuya-oh/react-native-modal
```
#### **yarn**
```bash
yarn add @tuya-oh/react-native-modal
```
下面的代码展示了这个库的基本使用场景：
> [!WARNING] 使用时 import 的库名不变。
```ts
import React, {Component} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Modal from 'react-native-modal';
type Props = {
onPress: () => any;
};
type State = P & {
visible: boolean;
};
const DefaultModalContent: React.FC = props => (
Hi 👋!
);
abstract class ModalBaseScene extends Component<
any,
State
> {
abstract renderModal(): React.ReactElement;
// @ts-ignore
constructor(props, state?: P) {
super(props);
// @ts-ignore
this.state = {
...state,
visible: false,
};
}
open = () => this.setState({visible: true} as any);
close = () => this.setState({visible: false} as any);
isVisible = () => this.state.visible;
public renderButton(): React.ReactElement {
return (
);
}
render() {
return (
{this.renderButton()}
{this.renderModal()}
);
}
}
class DefaultModal extends ModalBaseScene {
renderModal(): React.ReactElement {
return (
);
}
}
const styles = StyleSheet.create({
view: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
content: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
});
export default DefaultModal;
```
## 约束与限制
### 兼容性
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
react-native-harmony: 0.72.27
DevEco Studio: 5.0.3.400
OH SDK: HarmonyOS NEXT DB1
ROM: 3.0.0.25
## 属性
> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
根据上下文，`react-native-modal.md` 文件中的“属性”部分已经是以中文形式呈现的，无需进一步翻译。以下是属性部分的完整内容摘要，确保其清晰易读：
| 名称 | 描述 | 类型 | 默认值 | 是否必填 | 支持平台 | HarmonyOS 支持 |
| ------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------- | ------------------------------ | -------- | -------- | -------------- |
| animationIn | Modal 显示时的动画 | `string` 或 `object` | "slideInUp" | 否 | 全部 | 是 |
| animationInTiming | Modal 显示动画的时间（毫秒） | `number` | 300 | 否 | 全部 | 是 |
| animationOut | Modal 隐藏时的动画 | `string` 或 `object` | "slideOutDown" | 否 | 全部 | 是 |
| animationOutTiming | Modal 隐藏动画的时间（毫秒） | `number` | 300 | 否 | 全部 | 是 |
| avoidKeyboard | 如果键盘打开，将 Modal 向上移动 | `bool` | false | 否 | 全部 | 是 |
| coverScreen | 使用 RN 的 `Modal` 组件覆盖整个屏幕，无论 Modal 在组件层次结构中的位置如何 | `bool` | true | 否 | 全部 | 是 |
| hasBackdrop | 是否渲染背景遮罩 | `bool` | true | 否 | 全部 | 是 |
| backdropColor | 背景遮罩的颜色 | `string` | "black" | 否 | 全部 | 是 |
| backdropOpacity | Modal 可见时背景遮罩的透明度 | `number` | 0.70 | 否 | 全部 | 是 |
| backdropTransitionInTiming | 背景遮罩显示的时间（毫秒） | `number` | 300 | 否 | 全部 | 是 |
| backdropTransitionOutTiming | 背景遮罩隐藏的时间（毫秒） | `number` | 300 | 否 | 全部 | 是 |
| customBackdrop | 自定义背景遮罩元素 | `node` | null | 否 | 全部 | 是 |
| children | Modal 的内容 | `node` | **必填** | 是 | 全部 | 是 |
| deviceHeight | 设备高度（适用于可以隐藏导航栏的设备） | `number` | null | 否 | 全部 | 是 |
| deviceWidth | 设备宽度（适用于可以隐藏导航栏的设备） | `number` | null | 否 | 全部 | 是 |
| isVisible | 是否显示 Modal | `bool` | **必填** | 是 | 全部 | 是 |
| onBackButtonPress | Android 返回按钮按下时调用 | `func` | () => null | 否 | Android | 是 |
| onBackdropPress | 点击背景遮罩时调用 | `func` | () => null | 否 | 全部 | 是 |
| onModalWillHide | Modal 隐藏动画开始前调用 | `func` | () => null | 否 | 全部 | 是 |
| onModalHide | Modal 完全隐藏时调用 | `func` | () => null | 否 | 全部 | 是 |
| onModalWillShow | Modal 显示动画开始前调用 | `func` | () => null | 否 | 全部 | 是 |
| onModalShow | Modal 完全可见时调用 | `func` | () => null | 否 | 全部 | 是 |
| onSwipeStart | 滑动操作开始时调用 | `func` | () => null | 否 | 全部 | 是 |
| onSwipeMove | 每次滑动事件触发时调用 | `func` | (percentageShown) => null | 否 | 全部 | 是 |
| onSwipeComplete | 达到 `swipeThreshold` 时调用 | `func` | ({ swipingDirection }) => null | 否 | 全部 | 是 |
| onSwipeCancel | 未达到 `swipeThreshold` 时调用 | `func` | () => null | 否 | 全部 | 是 |
| panResponderThreshold | 滑动事件被拾取的阈值 | `number` | 4 | 否 | 全部 | 是 |
| scrollOffset | 当大于 0 时，禁用滑动关闭，以实现可滚动内容 | `number` | 0 | 否 | 全部 | 是 |
| scrollOffsetMax | 实现可滚动内容的过度滚动效果 | `number` | 0 | 否 | 全部 | 是 |
| scrollTo | 实现可滚动 Modal，参考 `/example` 目录 | `func` | null | 否 | 全部 | 是 |
| scrollHorizontal | 如果 scrollView 是水平的，设置为 true（用于正确的滚动处理） | `bool` | false | 否 | 全部 | 是 |
| swipeThreshold | 达到此阈值时调用 `onSwipeComplete` | `number` | 100 | 否 | 全部 | 是 |
| swipeDirection | 定义 Modal 可以滑动的方向，可以是 'up'、'down'、'left'、'right' 或其组合，例如 `['up', 'down']` | `string` 或 `array` | null | 否 | 全部 | 是 |
| useNativeDriver | 定义动画是否使用原生驱动 | `bool` | false | 否 | 全部 | 是 |
| useNativeDriverForBackdrop | 定义背景遮罩动画是否使用原生驱动（避免 Android 上闪烁） | `bool` | null | 否 | 全部 | 是 |
| hideModalContentWhileAnimating | 提升性能，隐藏 Modal 内容直到动画完成 | `bool` | false | 否 | 全部 | 是 |
| propagateSwipe | 允许滑动事件传播到子组件（例如 Modal 内的 ScrollView） | `bool` 或 `func` | false | 否 | 全部 | 是 |
| style | 应用于 Modal 的样式 | `any` | null | 否 | 全部 | 是 |
如果需要对某些字段进行更详细的解释，请明确指出具体需求！
## 遗留问题
## 其他
## 开源协议
本项目基于 [The MIT License (MIT)](https://github.com/react-native-modal/react-native-modal/blob/master/LICENSE.md) ，请自由地享受和参与开源。