# ty-react-native-magic-list

**Repository Path**: rn-mi/ty-react-native-magic-list

## Basic Information

- **Project Name**: ty-react-native-magic-list
- **Description**: ty-react-native-magic-list
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-27
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>react-native-magic-list</code> </h1>
</p>
<p align="center">
    <a href="https://github.com/Risatoar/react-native-magic-list">
        <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/Risatoar/react-native-magic-list/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

This project is based on [react-native-magic-list](https://github.com/Risatoar/react-native-magic-list)

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

## 安装与使用

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

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

#### **npm**

```bash
npm install @tuya-oh/react-native-magic-list
```

#### **yarn**

```bash
yarn add @tuya-oh/react-native-magic-list
```

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

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

```js
import React from 'react';
import { View } from 'react-native';
import { MagicFlatList } from 'react-native-magic-list';

const mockedData = Array(10).fill(1);

export class Demo extends React.Component {
	render() {
		return (
			<MagicFlatList
				data={mockedData}
				animateType='floatFromBottom'
				renderItem={() => (
					<View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
				)}
			/>
		);
	}
}
```

## 约束与限制

### 兼容性

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

1. RNOH: 0.72.28; SDK: HarmonyOS NEXT Developer Beta3 5.0.0.36(12 Beta3); IDE: DevEco Studio 5.0.3.535; ROM: 5.0.0.31;

## 属性

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

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

> [!TIP] "Name"列属性navigator在使用时，请参考本文档其他

| Name               | Description                  |      Type       | Required |  Platform   | HarmonyOS Support |
| ------------------ | ---------------------------- | :-------------: | :------: | :---------: | :---------------: |
| renderItem         | Rendering component          |    function     |   yes    | iOS/Android |        yes        |
| delay              | each item's delay            |     number      |    no    | iOS/Android |        yes        |
| animateType        | Entry animation type         | array or string |    no    | iOS/Android |        yes        |
| touchAnimateType   | Touch the animation          |     string      |    no    | iOS/Android |        yes        |
| FlatList.propTypes | Inherit FlatList's propTypes |       any       |    no    | iOS/Android |        yes        |

## 遗留问题

## 其他

When you need to use the entrance animation you can choose the following two ways: animateType="floatFromBottom" or animateType=["floatFromBottom",'"floatFromLeft"], But if you use a hybrid animation, only the top one will work, and the rest of the base animations won't work.

## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/Risatoar/react-native-magic-list/blob/master/LICENSE) ，请自由地享受和参与开源。