@dfeidao/fd-m000018

列表组件 FlatList

Usage no npm install needed!

<script type="module">
  import dfeidaoFdM000018 from 'https://cdn.skypack.dev/@dfeidao/fd-m000018';
</script>

README

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

  1. scrollType为0的时候,不调用滚动事件
  2. scrollType为1的时候,调用scrollIntoView属性，要和scrollIntoView一起使用
  3. scrollType为2的时候,调用scrollToEnd属性，要和scrollToEnd一起使用
  4. 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

添加一些方法的定义

4.6.201907081542