`react-native-translucent-modal`

本项目基于 react-native-translucent-modal 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-translucent-modal，版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-translucent-modal	~ 1.2.0	Gitcode Releases	0.82.*	否	API12+	1.1.2	Npm Address
@react-native-ohos/react-native-translucent-modal	~ 1.2.0	Gitcode Releases	0.77.*	否	API12+	1.1.2	Npm Address
@react-native-oh-tpl/react-native-translucent-modal	1.1.0-0.0.3	Github Releases	0.72.*	否	API12+	1.1.2	Npm Address

1. 安装与使用

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

npm

# 0.77/0.82
npm install @react-native-ohos/react-native-translucent-modal

# 0.72
npm install @react-native-oh-tpl/react-native-translucent-modal

yarn

# 0.77/0.82
yarn add @react-native-ohos/react-native-translucent-modal

# 0.72
yarn add @react-native-oh-tpl/react-native-translucent-modal

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

使用时 import 的库名不变。

import React, { useState } from "react";
import { View, TouchableWithoutFeedback, Image, Button, StyleSheet } from "react-native-harmony";
// @ts-expect-error
import Modal from "react-native-translucent-modal";

const STYLES = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    imageBackground: {
        width: 300,
        height: 200,
    }
});

export const E_ReactNativeTranslucentModal: React.FC = (): JSX.Element => {

    const [transparent, setTransparent] = useState(false)
    const [visible, setVisible] = useState(false)
    const [animationType, setAnimationType] = useState('none')

    return <View style={STYLES.wrapper}>
        <Modal transparent={transparent} animationType={animationType}
            visible={visible} onRequestClose={() => setVisible(!visible)}>
            <TouchableWithoutFeedback onPress={() => setVisible(false)}>
             {/* 注意：1、此图片组件为示例，需要根据自己的项目需求，去引入对应组件；
                2、示例图片地址需要根据自己的项目情况去引入 */}
                <Image source={{ uri: "https://hbimg.huabanimg.com/ed258f740ab675e3b3a0b6e7abc44eb7bd832c523396b-cJL1G9_fw658"}} style={STYLES.imageBackground} />
            </TouchableWithoutFeedback>
        </Modal>
        <Button title="显示Modal" onPress={() => setVisible(true)}></Button>
        <Button title="设置transparent为true" onPress={() => setTransparent(true)}></Button>
        <Button title="设置animationType为'slide'" onPress={() => setAnimationType('slide')}></Button>
        <Button title="设置animationType为'fade'" onPress={() => setAnimationType('fade')}></Button>
    </View>;
}

2. 约束与限制

2.1. 兼容性

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-ohos/react-native-translucent-modal Releases

本文档内容基于以下版本验证通过：

RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
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.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1.260; ROM: 6.0.0.130 SP15;

3. 属性

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

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

react-native提供的Modal组件，在HarmonyOS、iOS平台一样可以实现状态栏沉浸式效果。

Name	Description	Type	Required	Platform	HarmonyOS Support
`animationType`	模态框的动画类型。	string	No	All	yes
`transparent`	模态框背景是否透明。	boolean	No	All	yes
`visible`	控制模态框是否显示。	boolean	No	All	yes
`onRequestClose?: () => void`	当模态框请求关闭时调用。	function	No	ALL	yes

4. 遗留问题

5. 其他

6. 开源协议

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