@dfeidao/fd-m000018

v4.6.201908261618

Published

2 years ago

列表组件 FlatList

Downloads

0High
0Medium
0Low

taoqf

feidao 01feidao dfeidao atom 飞道控件 ai

Installation

yarn add --dev @dfeidao/fd-m000018

fd-m000018 列表组件FlatList

import FlatList from '@dfeidao/fd-m000018';

<FlatList
	data={[{ text: 'a' }, { text: 'b' }]}
	renderItem={({ item }) => <Text>{item.text}</Text>}
/>

Attributes

renderItem

从data中挨个取出数据并渲染到列表中

data

需要渲染的数据

ItemSeparatorComponent

行与行之间的分隔线组件不会出现在第一行之前和最后一行之后

ListEmptyComponent

列表为空时渲染该组件

ListFooterComponent

尾部组件

ListHeaderComponent

头部组件

horizontal

设置为 true 则变为水平布局模式。

initialNumToRender

指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。

onEndReached

当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

onEndReachedThreshold

决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。

onRefresh

如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

refreshing

在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。

scrollType

scrollType为0的时候,不调用滚动事件
scrollType为1的时候,调用scrollIntoView属性，要和scrollIntoView一起使用
scrollType为2的时候,调用scrollToEnd属性，要和scrollToEnd一起使用
scrollType为3的时候,调用scrollToPosition属性，要和scrollToPosition一起使用

scrollIntoView

如果设置的跳转到指定节点位置,和scrollType属性一起使用

scrollToEnd

如果设置了此属性，则跳转到FlatList底部,和scrollType属性一起使用

scrollToPosition

如果设置了此属性，根据传入的x值和y值来滚动到指定位置,和scrollType属性一起使用

example

滚动到底部

触发事件 a005

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a005(fd: IFeidaoAiMobile) {
	render(fd, {
		scrollType: 2,		// scrollType属性值为2代表调用scrollToEnd属性
		scrollToEnd: true

	});
}

页面

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import FlatList from 'fd-m000018';

export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
	return (<View>
		<Button
			title='Scroll to end'
			onPress={a('a005')
			}
		></Button>
		<FlatList
			scrollType={d('scrollType')}
			scrollToEnd={d('scrollToEnd')}
			removeClippedSubviews={false}
			data={[
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'a' }
			]}
			keyExtractor={(item, index) => {
				return (item as { key: string }).key + index;
			}}
			renderItem={({ item }) => {
				const temp = item as { key: string };
				if (temp.key === 'a') {
					return (
						<View>
								<TextInput
									style={{ backgroundColor: 'blue' }}
								/>
						</View>
					);
				} else {
					return (
						<Text>{temp.key}</Text>
					);
				}
			}}
		/>
	</View >);
}

滚动指定位置 a006

响应事件

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a006(fd: IFeidaoAiMobile) {
	render(fd, {
		scrollType: 3,		// scrollType属性值为3代表调用scrollToPosition属性
		scrollToPosition: { x: 0, y: 200, animated: false }
	});
}

页面

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import FlatList from 'fd-m000018';

export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
	return (<View>
		<Button
			title='Scroll to'
			onPress={a('a006')
			}
		></Button>

		<FlatList
			scrollType={d('scrollType')}
			scrollToPosition={d('scrollToPosition')}
			removeClippedSubviews={false}
			data={[
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'center' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
			]}
			keyExtractor={(item, index) => {
				return (item as { key: string }).key + index;
			}}
			renderItem={({ item }) => {
				const temp = item as { key: string };
				if (temp.key === 'a') {
					return (
						<View>
							<View style={{ backgroundColor: 'blue' }}>
								<TextInput
									style={{ backgroundColor: 'blue' }}
								/>
							</View>
						</View>
					);
				} else {
					return (
						<Text>{temp.key}</Text>
					);
				}
			}}
		/>
	</View >);
}

滚动到指定的节点

初始化事件节点绑定 a001

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';
import am053 from '@dfeidao/fd-am000053';

export default function a001(fd: IFeidaoAiMobile) {
	const blue = am053(fd, 'blue');		// 绑定节点
	const red = am053(fd, 'red');		// 绑定节点
	render(fd, {
		blue,
		red
	});
}

跳转到red的节点事件 a003

import am054 from '@dfeidao/fd-am000054';
import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a003(fd: IFeidaoAiMobile) {
	const widget = am054(fd, 'red');		// 获取节点信息
	render(fd, {
		scrollType: 1,							// scrollType属性值为1代表调用scrollIntoView属性
		scrollIntoView: widget
	});
}

跳转到blue的节点事件 a002

import am054 from '@dfeidao/fd-am000054';
import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a002(fd: IFeidaoAiMobile) {
	const widget = am054(fd, 'blue');			// 获取节点信息
	render(fd, {
		scrollType: 1,							// scrollType属性值为1代表调用scrollIntoView是属性
		scrollIntoView: widget
	});
}

页面

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import FlatList from 'fd-m000018';

export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
	return (<View>
		<Button
			title='Scroll to Red'
			onPress={a('a003')
			}
		></Button>

		<Button
			title='Scroll to blue'
			onPress={a('a002')
			}
		></Button>
		<FlatList
			scrollType={d('scrollType')}
			scrollIntoView={d('scrollIntoView')}
			removeClippedSubviews={false}
			data={[
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'center' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'b' },
				{ key: 'a' }
			]}
			keyExtractor={(item, index) => {
				return (item as { key: string }).key + index;
			}}
			renderItem={({ item }) => {
				const temp = item as { key: string };
				if (temp.key === 'a') {
					return (
						<View>
							<View ref={d('blue')}			// 要跳转的 blue 节点
								style={{ backgroundColor: 'blue' }}>
								<TextInput
									style={{ backgroundColor: 'blue' }}
								/>
							</View>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<Text>white</Text>
							<View ref={d('red')}			// 要跳转的 red 节点
								style={{ backgroundColor: 'red' }}>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
								<Text>red</Text>
							</View>
						</View>
					);
				} else {
					return (
						<Text>{temp.key}</Text>
					);
				}
			}}
		/>
	</View >);
}

详细信息可以查看官方文档 https://reactnative.cn/docs/flatlist/

ChangeLogs

latest

添加一些方法的定义