模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-selfadapt-modal Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

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

npm

npm i @tuya-oh/react-native-selfadapt-modal

yarn

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

快速使用：

import React from 'react';
import { View, Text ,StyleSheet} from 'react-native';
import SelfadaptModal from 'react-native-selfadapt-modal';

const TestData = [
    { id: 10086, name: 'Option 1(This is a long, long, long option.)' },
    { id: 10087, name: 'Option 2' },
    { id: 10088, name: 'Option 3' },
    { id: 10089, name: 'Option 4' },
];

export const SelfadaptModalDemo = () => {
    const onPress = () => {
        console.log('onPress');
    }

    return (
        <View>
            <SelfadaptModal
                menuList={TestData}
                containerStyle={styles.demeOneBtn}
                content={''}
                onPress={onPress}>
                <Text style={{ fontSize: 14, color: '#fff' }}>{`click here`}</Text>
            </SelfadaptModal>
        </View>
    );
};

const styles = StyleSheet.create({
    demeOneBtn: {
        padding: 10,
        borderRadius: 5,
        backgroundColor: '#58A0FF',
    },
});

约束与限制

兼容性

在以下版本验证通过

1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58;
2. 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;

属性

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

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

属性

| Name | Description | Type | Required | platform | HarmonyOS Support | |:----------------- | ------------------------------------- |:----------:|:--------:| -------- | ----------------- | | menuList | 下拉框选项列表数据源 | array | yes | All | YES | | label | 用于显示的选项的label | string | no | All | YES | | content | 默认选项. | string | no | All | YES | | paddingWidth | 按钮的padding高度 | number | no | All | YES | | privateMenuItem | 自定义选项组件 | function | false | All | YES | | modalStyle | modal样式 | object | no | All | YES | | flatListStyle | FlatList样式 | object | no | All | YES | | activeMenuStyle | 选中单项选项容器样式 | object | no | All | YES | | unActiveMenuStyle | 未选中单项选项容器样式 | object | no | All | YES | | openStatus | 获取Modal展开状态的回调函数 | function | no | All | YES | | listHeader | 固定的列表头部,非固定头部可传入ListHeaderComponent实现 | function | no | All | YES | | children | 子元素 | element | no | All | YES | | onPress | 下拉选项点击事件 | function | no | All | YES | | containerStyle | 按钮样式 | object | no | All | YES |

遗留问题

其他

开源协议

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