ScrollView

Wie eine View ist diese Komponente ein Container für andere Komponenten. Sie unterstützt jedoch Scrollen (Schwenken) und Zoomen, sodass es möglich ist, größere Inhalte anzuzeigen.

ScrollViews müssen eine begrenzte Höhe (oder Breite, wenn horizontal gescrollt wird) haben, da ihre Kinder eine unbegrenzte Höhe (oder Breite) haben. Um die Dimensionen einer ScrollView zu begrenzen, setzen Sie entweder die Höhe/Breite direkt oder stellen Sie sicher, dass die Höhe/Breite ihres übergeordneten Elements begrenzt ist.

Props

// Should scroll bar bounce when user hits the bounds?
bounces: boolean = true; // iOS only

// Controls the scroll direction. When false or undefined, only vertical scroll is enabled, when true, only horizontal scroll is enabled
horizontal: boolean = false;

// When the user scrolls the view, how should the on-screen keyboard react?
keyboardDismissMode: 'none' | 'interactive' | 'on-drag'; // Native only

// Should the on-screen keyboard remain visible when the user taps
// the scroll view?
keyboardShouldPersistTaps: boolean | 'always' | 'never' | 'handled' = 'never'; // Native only

// Invoked when the contents of the scroll view change
onContentSizeChange: (width: number, height: number) => void = undefined;

// Focus Events
onFocus: (e: FocusEvent) => void = undefined;
onBlur: (e: FocusEvent) => void = undefined;

// Keyboard Events
onKeyPress: (e: KeyboardEvent) => void = undefined;

// Invoked when view dimensions or position changes
onLayout: (e: ViewOnLayoutEvent) => void = undefined;

// Called when the scroll position changes
onScroll: (newScrollTop: number, newScrollLeft: number) => void = undefined;

// Called when the user starts or stops scrolling (touch-based systems only)
onScrollBeginDrag: () => void = undefined;
onScrollEndDrag: () => void = undefined;

// Animation helpers to allow usage of the RN.Animated.Event system through ReactXP.
// AnimatedValue objects hooked up to either (or both) of these properties will be automatically
// hooked into the onScroll handler of the scrollview and .setValue() will be called on them
// with the updated values.  On supported platforms, it will use RN.Animated.event() to do
// a native-side/-backed coupled animation.
scrollXAnimatedValue?: RX.Types.AnimatedValue;
scrollYAnimatedValue?: RX.Types.AnimatedValue;

// Android only property to control overScroll mode
overScrollMode?: 'auto' | 'always' | 'never';

// Snap to page boundaries?
pagingEnabled: boolean = false; // Android & iOS only
snapToInterval: number = undefined; // iOS only

// Is scrolling enabled?
scrollEnabled: boolean = true;

// Minimum duration (in milliseconds) between scroll events
scrollEventThrottle: number = undefined;

// Inset (in pixels) of scroll indicator from top/bottom (vertical)
// or left/right (horizontal)
scrollIndicatorInsets: ScrollIndicatorInsets = undefined;

// If true, this scroll bar scrolls to the top when the user
// taps on the status bar.
scrollsToTop: boolean = false; // iOS only

// Should the indicator be displayed?
showsHorizontalScrollIndicator: boolean = [same as horizontal];
showsVerticalScrollIndicator: boolean = [same as horizontal];

// See below for supported styles
style: ViewStyleRuleSet | ViewStyleRuleSet[] = [];

// Windows-only property to control tab navigation inside the view
tabNavigation?: 'local' | 'cycle' | 'once';

// ID that can be used to identify the instantiated element for testing purposes.
testId: string = undefined;

Stile

Flexbox-Stile

Ansichtsstile

Transformationsstile

Methoden

// Sets the accessibility focus to the component.
focus(): void;

// Sets the absolute top or left position (measured in pixels) of the
// viewport within the scroll view. Optionally animates from the current
// position.
setScrollLeft(scrollLeft: number, animate: boolean): void;
setScrollTop(scrollTop: number, animate: boolean): void;