React Native Knowledge 9-scrollview component

A component that wraps the platform's ScrollView (scrolling view), while also integrating a touch-locked "responder " system.

Remember that ScrollView must have a certain height in order to work properly, as it actually does is to load a series of sub-components of the indeterminate height into a container of height (by scrolling). To determine a height for a scrollview, either set the height directly to it (not recommended), or make sure that all parent containers are already bound to the height. Forgetting to use {flex:1} anywhere in the view stack causes an error, and you can use the element viewer to find the cause of the problem.

Other responders inside the ScrollView have not yet been able to prevent ScrollView itself from becoming a responder.

One: Properties

1: Contentcontainerstyle stylesheetproptype (viewstyleproptypes)

These styles are applied to an inner content container, and all child views are wrapped within the content container. Example:

return (    <contentcontainerstyle={styles.contentcontainer} >    </ ScrollView >   );  ...  var styles = stylesheet.create ({    contentcontainer: {      paddingvertical:20    }  });

2: Horizontal bool

When this property is True, all of the child views are lined up horizontally, rather than the default vertical column. The default value is false.

3: Keyboarddismissmode enum (' None ', ' interactive ', ' On-drag ')

Whether you want to hide the soft keyboard when the user drags the scrolling view.

4:None (default), do not hide the soft keyboard when dragging.

5:On-drag Hide the soft keyboard when dragging starts.

6:The interactive soft keyboard accompanies the drag operation to disappear synchronously and restores the keyboard if you swipe up. This option is not supported on Android devices and will behave the same as none.

7: keyboardshouldpersisttaps bool

When this property is false, after the soft keyboard is activated, click outside the focus text input box and the keyboard will be hidden. If true, scrolling views do not respond to click Actions, and the keyboard does not automatically disappear. The default value is false.

8: Oncontentsizechange function

This function is called when the view of ScrollView internal scrollable content changes.

The call parameter is the width and height of the content view: (Contentwidth, Contentheight)

This method is implemented by binding the OnLayout on the content container .

9: onscroll function

This callback function is called at most once per frame during scrolling. The frequency of the call can be controlled with the Scrolleventthrottle property.

Ten: Refreshcontrol element

Specifies the Refreshcontrol component that is used to provide a pull-down refresh feature for ScrollView.

One: removeclippedsubviews bool

(Experimental characteristics): When this property is True, a child view outside the screen (the overflow style of the child view needs to be set to hidden) is removed. This can improve scrolling performance for large lists. The default value is true.

: showshorizontalscrollindicator bool

When this property is true, a horizontal scroll bar is displayed.

: showsverticalscrollindicator bool

When this property is true, a vertical scroll bar is displayed.

Sometimes scrolling views occupy more space than the actual content. In this case, you can use this property to specify a color to fill the extra space to avoid setting the background and creating unnecessary drawing overhead. This kind of advanced optimization technique is not normally required.

: (iOS) alwaysbouncehorizontal bool

When this property is true, the horizontal direction can be pulled in a stretch even if the content is smaller than the scrolling view itself. The default value is True when Horizontal={true} , otherwise false.

: (iOS) alwaysbouncevertical bool

When this property is true, the vertical direction can be pulled in a stretch even if the content is smaller than the scrolling view itself. The default value is False when Horizontal={true} , otherwise true.

: (iOS) automaticallyadjustcontentinsets bool

If the scrolling view is placed behind a navigation bar or toolbar, does theiOS system automatically adjust the scope of the content? The default value is true. If your ScrollView or ListView's head appears in a baffling space, try to set this property to false

: (iOS) bounces bool

when the value is true, if the content range is larger than the scrolling view itself, the end of the content can be pulled with a stretch. If false, all the elasticity of the trailer is disabled, even if the alwaysbounce* property is true. The default value is true.

: (iOS) bounceszoom bool

When the value is true, using gestures to scale content can exceed the limit of Min/max, and then bounce back the Min/max scale when the finger is lifted . Otherwise, scaling cannot exceed the limit.

: (iOS) cancancelcontenttouches bool

When the value is false, once a child node responds to a touch operation, the scrolling view is not dragged even if the finger starts to move. The default value is true (in which case you can drag the scrolling view.) )

: (iOS) centercontent bool

When the value is true, the content is automatically centered if the content of the scrolling view is smaller than the view itself. This property has no effect when the content is larger than the scrolling view. The default value is false.

: (iOS) contentinset {top:number, Left:number, Bottom:number, right:number}

The coordinates of the content range relative to the scrolling view edge. The default is {0, 0, 0, 0}.

At: (iOS) contentoffset pointproptype

Used to manually set the initial scrolling coordinates. The default value is {x:0, y:0}.

: (iOS) decelerationrate number

A floating-point number that determines how quickly the scrolling view slows down when the user lifts his finger. The common options are:

normal:0.998 ( default value)

fast:0.9

: (iOS) directionallockenabled bool

When the value is true, the scrolling view is locked when dragged, and can only be scrolled vertically or horizontally. The default value is false.

: (iOS) Maximumzoomscale number

The maximum allowable zoom ratio. The default value is 1.0.

: (iOS) Minimumzoomscale number

The minimum allowable zoom ratio. The default value is 1.0.

: (iOS) onrefreshstart function

Has expired

Please use the Refreshcontrol property instead.

: (iOS) onscrollanimationend function

This callback is called when the scrolling animation ends.

: pagingenabled bool

When the value is true, the scrollbar stops at the integer multiple positions of the dimensions of the scrolling view. This can be used on horizontal paging. The default value is false.

: (iOS) scrollenabled bool

when the value is false, the content cannot be scrolled, and the default is true.

: (iOS) scrolleventthrottle number

This property controlshow often the scroll event is called (in units of events per second) during scrolling. Larger values track the scrolling position more quickly, but may cause performance problems as more information is passed through bridge. The default value is 0, which means that each time the view is scrolled, thescroll event is only called once.

: (iOS) scrollindicatorinsets {top:number, Left:number, Bottom:number, right:number}

Determines the coordinates of the scroll bar from the edge of the view. This value should be the same as Contentinset. The default value is {0, 0, 0, 0}.

: (iOS) scrollstotop bool

When this value is true, the view scrolls to the top when you click the status bar. The default value is true.

: (iOS) snaptoalignment enum (' Start ', ' center ', ' End ')

When Snaptointerval is set, Snaptoalignment defines the relationship between the stop point and the scrolling view.

:Start (default ) aligns the stop points to the left (horizontal) or top (vertical)

PNS:Center Aligns the stop points to the middle

:End aligns the stop point to the right (horizontal) or bottom (vertical)

: (iOS) snaptointerval number

When this property is set, the scrolling view stops at a multiple of snaptointerval after scrolling is stopped . This can be used to implement pagination display when some sub-views are smaller than the scrolling view itself. used in combination with snaptoalignment.

Max: (iOS) stickyheaderindices [number]

An array of sub-view subscripts that determines which members are pinned to the top of the screen after scrolling. For example, passing stickyheaderindices={[0]} causes the first member to be pinned to the top of the scrolling view. This property cannot be used with horizontal={true}.

In: (iOS) Zoomscale number

The initial zoom scale of the scrolling view content. The default value is 1.0.

Two: Style

Three: Methods

1: ScrollTo (Y:number | {x?: number, Y?: number, Animated?: Boolean}, X:number, Animated:boolean)

Scrolls to the specified x, y offset. The third parameter is whether to enable smooth scrolling animations.

Examples of Use :

2: ScrollTo ({x:0, y:0, animated:true})

Four: Instance code

import React, {Component} from ' React '; import {appregistry, StyleSheet, Text, View, TextInput, Alert, Toucha Blehighlight, Touchableopacity, WebView, ScrollView} from ' react-native ';//navigation bar class Reactnativeproject extends Compone NT {render () {return (<Viewstyle={styles.container}>              <Textstyle={{margintop:50}}>to test the ScrollView control</Text>               <ScrollViewShowsverticalscrollindicator={true}Contentcontainerstyle={styles.contentcontainer}>                  <Textstyle={{color: ' #FFF ', Margin:5,fontsize:16,backgroundcolor: ' Blue '}}>                      Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu BU  Tton for Dev Menushake or press menu button for dev menu Shake or press menu button for Dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button                      for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or P Ress menu button for dev menushake or press menu button for dev menu Shake or press menu button for D EV Menushake or press menu button for dev menu Shake or press menu button for Dev Menushake or press menu button for Dev menu                      Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu BU  Tton for Dev Menushake or press menu button for dev menu Shake or press menu button for Dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button                      for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or P Ress menu button for dev menushake or press menu button for dev menu Shake or press menu button for D EV Menushake or press menu button for dev menu Shake or press menu button for Dev Menushake or press menu button for Dev menu                      Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button for dev menu Shake or press menu BU  Tton for Dev Menushake or press menu button for dev menu Shake or press menu button for Dev menushake or press menu button for dev menu Shake or press menu button for dev menushake or press menu button                      for dev menu Shake or press menu button for dev menushake or press menu button for dev menu                   Shake or press menu button for dev menushake or press menu button for dev menu</Text>               </ScrollView>            </View>      );    }}const styles = stylesheet.create ({container: {height:400, justifycontent: ' Center ', Alignitems: ' Center ', BackgroundColor: ' #F5FCFF ',}, Contentcontainer: {margin:10, backgroundcolor: ' #ff0000 ',}}); Appregistry.registercomponent (' Reactnativeproject ', () = Reactnativeproject);

：

V: Knowledge points

1: Contentcontainerstyle

These styles are applied to an inner content container, and all child views are wrapped within the content container. The properties of the Ps:scrollview component cannot be set with a style and must be used with this property name

Otherwise:

React Native Knowledge 9-scrollview component