# react-native-selfadapt-modal

**Repository Path**: rn-mi/react-native-selfadapt-modal

## Basic Information

- **Project Name**: react-native-selfadapt-modal
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-18
- **Last Updated**: 2025-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>react-native-selfadapt-modal</code> </h1>
</p>
<p align="center">
        <a href="https://github.com/leecade/react-native-selfadapt-modal/blob/master">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/leecade/react-native-selfadapt-modal/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP] [Gitee 地址](https://gitee.com/rn-mi/react-native-selfadapt-modal)

## 安装与使用


请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-selfadapt-modal Releases](https://gitee.com/rn-mi/react-native-selfadapt-modal/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。

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

<!-- tabs:start -->

#### **npm**

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

#### **yarn**

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

<!-- tabs:end -->

快速使用：

```js
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)](https://github.com/leecade/react-native-selfadapt-modal/blob/master/LICENSE) ，请自由地享受和参与开源。