模板版本：v0.4.0

react-native-root-modal

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

支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-root-modal 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-root-modal	~5.1.0	@react-native-ohos/react-native-root-modal Releases	0.77./0.82.*	No	API12+	5.0.1	Npm Address
@react-native-ohos/react-native-root-modal	~5.0.1	@react-native-ohos/react-native-root-modal Releases	0.72.*	No	API12+	5.0.1	Npm Address
@react-native-oh-tpl/react-native-root-modal	<=5.0.0-0.0.1@deprecated	Github Releases(deprecated)	0.72.*	No	API12+	5.0.1	Npm Address

1. 安装与使用

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

npm

npm install @react-native-ohos/react-native-root-modal

yarn

yarn add @react-native-ohos/react-native-root-modal

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

import React, {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
} from 'react-native';

import Modal from 'react-native-root-modal';
import { Component } from 'react';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    button: {
        backgroundColor: '#ccc',
        borderRadius: 5,
        padding: 10,
    },
    modal: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(58, 93, 15, 0.8)',
        borderRadius: 40,
        height: '80%',
        width: '80%',
        bottom: 100,
        flex: 1,
        position: 'absolute',
    },
    close: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        right: 20,
        top: 40,
        backgroundColor: 'red'
    },
    modalContainer: {
        height: 100,
        width: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue',
        margin: 50
    },
    text: {
        color: '#fff'
    }
});

class CustomStyleDemo extends Component{
    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }

    showModal = () => {
        this.setState({
            visible: true
        });
    };

    hideModal = () => {
        this.setState({
            visible: false
        });
    };

    render() {
        return <View style={styles.container}>
             <TouchableHighlight
                style={styles.button}
                underlayColor="#aaa"
                onPress={this.showModal}
            >
                <Text>Show Modal</Text>
            </TouchableHighlight>
            <Modal style={styles.modal} visible={this.state.visible}>
                <TouchableHighlight
                    style={[styles.button, styles.close]}
                    underlayColor="#aaa"
                    onPress={this.hideModal}
                >
                    <Text>X</Text>
                </TouchableHighlight>

                <View style={styles.modalContainer}>
                    <Text style={styles.text}>You can custom your own Modal style</Text>
                </View>
            </Modal>
        </View>;
    }

}

export default CustomStyleDemo;

1.1 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

2. 约束与限制

2.1 兼容性

在以下版本验证通过：

1. RNOH: 0.72.33; SDK: OpenHarmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
3. RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.328 SP26;

3. 属性

react-native-root-modal组件接收所有React Native View组件的Props.

Modal

Name	Description	Type	Required	Platform	HarmonyOS Support
visible	控制模态框是否可见	boolean	no	Android/iOS	yes
style	设置模态框的样式，支持常规样式属性	style	no	Android/iOS	yes

AnimatedModal

Name	Description	Type	Required	Platform	HarmonyOS Support
visible	控制模态框是否可见	boolean	no	Android/iOS	yes
style	设置模态框的样式，支持常规样式属性	style	no	Android/iOS	yes

4. 遗留问题

5. 其他

6. 开源协议

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