模板版本：v13.0.1-0.0.1

[!TIP]git 地址

安装与使用

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

npm

npm install @tuya-oh/react-native-modal

yarn

yarn add @tuya-oh/react-native-modal

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

[!WARNING] 使用时 import 的库名不变。

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> = P & {
  visible: boolean;
};

const DefaultModalContent: React.FC<Props> = props => (
  <View style={styles.content}>
    <Text style={styles.contentTitle}>Hi 👋!</Text>
    <Button testID={'close-button'} onPress={props.onPress} title="Close" />
  </View>
);

abstract class ModalBaseScene<P extends object = {}> extends Component<
  any,
  State<P>
> {
  abstract renderModal(): React.ReactElement<any>;
  // @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<any> {
    return (
      <Button testID={'modal-open-button'} onPress={this.open} title="Open" />
    );
  }
  render() {
    return (
      <View style={styles.view}>
        {this.renderButton()}
        {this.renderModal()}
      </View>
    );
  }
}

class DefaultModal extends ModalBaseScene {
  renderModal(): React.ReactElement<any> {
    return (
      <Modal testID={'modal'} isVisible={this.isVisible()}>
        <DefaultModalContent onPress={this.close} />
      </Modal>
    );
  }
}

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) ，请自由地享受和参与开源。