Verwendung

Scroll a list in a test.

Dieser Typ wird verwendet von List

tsx
// Scroll a list in a test.
import { List, Text } from 'kuito';
import { assert, render, screen, scroll, test } from 'kuito/tests';

const rows = Array.from({ length: 200 }, (_, index) => `Row ${index}`);

const Long = () => <List data={rows} renderItem={({ item }) => <Text height={44}>{item}</Text>} />;

test('rows far down bind once the list scrolls to them', async () => {
  await render(<Long />);

  assert.equal(screen.queryByText('Row 150'), null);

  await scroll(screen.getByText('Row 0'), { y: 150 * 44 });

  assert.ok(screen.getByText('Row 150'));
});

Typdeklaration

ts
export interface ListProps<T> extends Omit<
  ScrollProps,
  'children' | 'ref' | 'paging' | 'snapOffsets' | 'onScrollEnd'
> {
  /** The items, or a signal of them. */
  data: Prop<readonly T[]>;
  renderItem: (info: ListItem<T>) => KuitoNode;
  /** A unique key per item; defaults to `item.key`, then `item.id`, then the index. */
  itemKey?: (item: T, index: number) => string;
  /** The item's section: each run of items with the same section gets a header row. */
  sectionKey?: (item: T, index: number) => string;
  /** Renders a section's header row, given its section and its first item. */
  renderSection?: (info: { section: string; item: T }) => KuitoNode;
  /** Section headers stay at the top while their section scrolls under them; vertical lists only. */
  stickySections?: boolean;
  separator?: Slot;
  header?: Slot;
  footer?: Slot;
  /** Rendered instead of the rows when `data` is empty. */
  empty?: Slot;
  /** Lays items out in rows of this many; `gap` spaces both directions. */
  columns?: number;
  /** Starts at the end, with the first item at the bottom (or the right). */
  inverted?: boolean;
  /** Scrolls to this item when the list first shows it; no `getItemLayout` needed. */
  initialIndex?: number;
  /** The length of a row not measured yet; the average measured row by default. */
  estimatedItemSize?: number;
  onViewableChange?: (info: {
    viewableItems: ViewableItem<T>[];
    changed: ViewableItem<T>[];
  }) => void;
  viewability?: Viewability;
  ref?: ElementRef<ListHandle>;
}

Mitglieder 120

NameTypErforderlichBeschreibung
dataProp<readonly T[]>JaThe items, or a signal of them.
renderItem(info: ListItem<T>) => KuitoNodeJa—
itemKey(item: T, index: number) => stringNeinA unique key per item; defaults to item.key, then item.id, then the index.
sectionKey(item: T, index: number) => stringNeinThe item's section: each run of items with the same section gets a header row.
renderSection(info: { section: string; item: T;}) => KuitoNodeNeinRenders a section's header row, given its section and its first item.
stickySectionsbooleanNeinSection headers stay at the top while their section scrolls under them; vertical lists only.
separatorSlotNein—
headerSlotNein—
emptySlotNeinRendered instead of the rows when data is empty.
columnsnumberNeinLays items out in rows of this many; gap spaces both directions.
invertedbooleanNeinStarts at the end, with the first item at the bottom (or the right).
initialIndexnumberNeinScrolls to this item when the list first shows it; no getItemLayout needed.
estimatedItemSizenumberNeinThe length of a row not measured yet; the average measured row by default.
onViewableChange(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => voidNein—
viewabilityViewabilityNein—
refElementRef<ListHandle>Nein—
scrollbarProp<boolean>NeinShows the scrollbar while scrolling; true by default.
opacityAnimatable<number>Nein—
backgroundColorAnimatable<string>Nein—
borderRadiusAnimatable<number>Nein—
borderColorAnimatable<string>Nein—
widthAnimatable<SizeValue>Nein—
heightAnimatable<SizeValue>Nein—
translateXAnimatable<number>Nein—
translateYAnimatable<number>Nein—
scaleAnimatable<number>Nein—
scaleXAnimatable<number>Nein—
scaleYAnimatable<number>Nein—
rotateAnimatable<number>NeinDegrees.
shadowColorAnimatable<string>Nein—
shadowRadiusAnimatable<number>Nein—
shadowOffsetXAnimatable<number>Nein—
shadowOffsetYAnimatable<number>Nein—
hiddenProp<boolean>NeinTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>Nein—
positionProp<"relative" | "absolute">Nein—
idstringNein—
classProp<ClassNames>NeinClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNeinStyles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (opacity).
onPress(event: PressEvent) => voidNein—
onPressCapture(event: PressEvent) => voidNein—
keystring | numberNein—
paddingTopProp<LengthPercentage>Nein—
paddingRightProp<LengthPercentage>Nein—
paddingBottomProp<LengthPercentage>Nein—
paddingLeftProp<LengthPercentage>Nein—
minWidthProp<SizeValue>Nein—
maxWidthProp<SizeValue>Nein—
minHeightProp<SizeValue>Nein—
maxHeightProp<SizeValue>Nein—
aspectRatioProp<number>NeinWidth divided by height; sizes the missing side from the other.
topProp<LengthPercentageAuto>Nein—
rightProp<LengthPercentageAuto>Nein—
bottomProp<LengthPercentageAuto>Nein—
leftProp<LengthPercentageAuto>Nein—
marginProp<LengthPercentageAuto>Nein—
marginTopProp<LengthPercentageAuto>Nein—
marginRightProp<LengthPercentageAuto>Nein—
marginBottomProp<LengthPercentageAuto>Nein—
marginLeftProp<LengthPercentageAuto>Nein—
flexGrowProp<number>Nein—
flexShrinkProp<number>Nein—
flexBasisProp<SizeValue | "content">Nein—
flexProp<number>NeinA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>Nein—
directionProp<"ltr" | "rtl">NeinThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">Nein—
paddingInlineStartProp<LengthPercentage>NeinPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NeinPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NeinMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NeinMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Neinleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Neinright in ltr, left in rtl.
roleProp<Role>Nein—
onAction(event: AccessibilityActionEvent) => voidNeinThe screen reader action taken, by name.
accessibleProp<boolean>NeinMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NeinWhat a screen reader says for the view.
hintProp<string>NeinWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NeinScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NeinActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NeinARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>Nein—
aria-selectedProp<boolean>Nein—
aria-checkedProp<boolean | "mixed">Nein—
aria-busyProp<boolean>Nein—
aria-expandedProp<boolean>Nein—
aria-valueminProp<number>Nein—
aria-valuemaxProp<number>Nein—
aria-valuenowProp<number>Nein—
aria-valuetextProp<string>Nein—
gesturesreadonly Composable[]NeinThe view's gestures; several race unless composed with together or orElse.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NeinHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NeinAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNeinWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NeinWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NeinHow the view moves to a new frame the layout gives it: layout={spring()}.
overflowProp<"visible" | "hidden" | "clip" | "scroll">Neinhidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>Nein—
backgroundGradient{ angle: number; colors: string[];}Nein—
colorProp<string>Nein—
sharedIdProp<string>NeinA view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
alignItemsProp<SelfAlignment>Nein—
justifyContentProp<ContentAlignment>Nein—
gapProp<LengthPercentage>Nein—
rowGapProp<LengthPercentage>Nein—
columnGapProp<LengthPercentage>Nein—
flexDirectionProp<"row" | "column" | "row-reverse" | "column-reverse">Nein—
flexWrapProp<"nowrap" | "wrap" | "wrap-reverse" | "balance">Nein—
flexLineCountProp<number>NeinThe minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
alignContentProp<ContentAlignment>Nein—
keyboardProp<{ dismiss?: "none" | "on-drag" | "interactive"; persistTaps?: "never" | "always" | "handled"; inset?: boolean; avoid?: "none" | "padding" | "position";}>Nein—
horizontalProp<boolean>NeinScrolls sideways; changing it remounts the view, as the native axis is fixed.
motionScrollMotionNeinMoves with the view every frame on the UI thread: scrollMotion(), given to one view.
onScroll(event: ScrollEvent) => voidNein—
onReachEnd(event: KuitoEvent<"reachend">) => voidNeinCalled once each time the content end comes within the threshold.
onRefresh(event: KuitoEvent<"refresh">) => voidNeinEnables pull-to-refresh.
scrollIntervalProp<number>NeinAt most one scroll event per this many milliseconds; 50 by default.
reachEndThresholdProp<number>NeinDistance from the end, in visible lengths, that counts as the end; 0.5 by default.
refreshingBound<boolean>NeinShows the pull-to-refresh spinner while true.
renderItem — Methodensignaturen

Signaturen

ts
(info: ListItem<T>): KuitoNode

Parameter

NameTypErforderlichBeschreibung
infoListItem<T>Ja—

Rückgabe

KuitoNode

itemKey — Methodensignaturen

Signaturen

ts
(item: T, index: number): string

Parameter

NameTypErforderlichBeschreibung
itemTJa—
indexnumberJa—

Rückgabe

string

sectionKey — Methodensignaturen

Signaturen

ts
(item: T, index: number): string

Parameter

NameTypErforderlichBeschreibung
itemTJa—
indexnumberJa—

Rückgabe

string

renderSection — Methodensignaturen

Signaturen

ts
(info: { section: string; item: T; }): KuitoNode

Parameter

NameTypErforderlichBeschreibung
info{ section: string; item: T;}Ja—

Rückgabe

KuitoNode

onViewableChange — Methodensignaturen

Signaturen

ts
(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[]; }): void

Parameter

NameTypErforderlichBeschreibung
info{ viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}Ja—

Rückgabe

void

onPress — Methodensignaturen

Signaturen

ts
(event: PressEvent): void

Parameter

NameTypErforderlichBeschreibung
eventPressEventJa—

Rückgabe

void

onPressCapture — Methodensignaturen

Signaturen

ts
(event: PressEvent): void

Parameter

NameTypErforderlichBeschreibung
eventPressEventJa—

Rückgabe

void

onAction — Methodensignaturen

Signaturen

ts
(event: AccessibilityActionEvent): void

Parameter

NameTypErforderlichBeschreibung
eventAccessibilityActionEventJa—

Rückgabe

void

backgroundGradient — verschachtelte Felder

backgroundGradient Felder

NameTypErforderlichBeschreibung
anglenumberJa—
colorsstring[]Ja—
onScroll — Methodensignaturen

Signaturen

ts
(event: ScrollEvent): void

Parameter

NameTypErforderlichBeschreibung
eventScrollEventJa—

Rückgabe

void

onReachEnd — Methodensignaturen

Signaturen

ts
(event: KuitoEvent<"reachend">): void

Parameter

NameTypErforderlichBeschreibung
eventKuitoEvent<"reachend">Ja—

Rückgabe

void

onRefresh — Methodensignaturen

Signaturen

ts
(event: KuitoEvent<"refresh">): void

Parameter

NameTypErforderlichBeschreibung
eventKuitoEvent<"refresh">Ja—

Rückgabe

void

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.