@tuya-oh/react-native-magic-list

模板版本：v0.2.2

react-native-magic-list

[!TIP] Gitee 地址

安装与使用

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

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

npm

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

yarn

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

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

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

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) ，请自由地享受和参与开源。