4.6.201908261618 • Published 5 years ago
@dfeidao/fd-m000018 v4.6.201908261618
Installation
yarn add --dev @dfeidao/fd-m000018fd-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
添加一些方法的定义