React Native ScrollView Component Broadcasting Diagram and ListView Rendering List Component Method

This example tells the ScrollView component boot map and the listView render list component usage. Share to everyone for reference, specifically:

1, Scroll View

ScrollView is the scroll view component provided by React Native, rendering a set of views, users can slide response interaction, which is common The property is as follows:

Rolled offset: horizontal offset can be obtained by Event.nativeEvent.ContentOffset.x.

    Horizontal = {BOOL}, when the property is TRUE, all sub-views are arranged in the horizontal direction, otherwise arranged in longitudinal direction. The default is false.
  • Pagingenabled = {boile}, when the property is True, the scroll will stay in the view size integer multiple, that is, it just shows a view, default is false
  • scrollenabled = {bool}, When the value is false, the view cannot scroll, the default true
  • showshorizontalscrollindicator = {bool}, the value is displaying a scroll bar at the bottom of the screen when scrolling, the default true
  • showsverticalscrollindicator = {BOOL }, The value is TRUE to display the rolling bar in the vertical direction when scrolling, the default true.
  • KeyboardDismissMode = “none” / “on-DRAG”, hide the soft keyboard when the sliding view is hidden, and the default None is not hidden.
  • OnContentChange = {Function}, the function is called when the ScrollView view size changes.
  • OnScroll = {function}, call the function when the scroll is scrolling.
  • ONMOMentumscrollStart = {function}, scroll start calling functions.
  • ONMOMENTUMSCROLLEEND = {function}, the function is called at the end of the scroll.
  • The method to which the component belongs is:
  • ScrollTo ({x: Num, Y: Num, Animated: BOOL}), the component view scroll to the specified X, Y position The third parameter is to enable animation
  • scrollToend ({animated: bool}), scroll to the end of the view.

For example, a Banner Runar is implemented, for example, by ScrollView:

  • The structure is as follows:

this.slide (e)} onscrollbegindrag = {() => {this.stoptimer ()}} // Use the user to stop automatically playing onscrollenddrag = {() => {THIS .SetTimer ()}} // Drag after the end of the Drag and drop> {/ * Rendering Running Picture * /} {this.renderbanner ()} React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

{/ * rendering bottom indicator tag point * /}

 Using the MAP traversal data array zodiac, rendering the picture to the page      Renderbanner () {return zodiac.map (item, index) => )}   
In the bottom rendering point:

renderindicate () {let jsx = []; for (let i = 0; i ●
) } else {jsx.push ( ● )}}}}}}  
Trigger ScrollView’s ONMOMSCROLLLLLLLLLLLVIEW at the end of the user, call the SLIDE function And pass the Event parameter to SLIDE. By calculating the index of the current page sliding to the current page, the calculation of the page number is divided by the X offset by the width of each view and then fits

 SLIDE (e) {let offset = E.NATIVEEvent.contentoffSet.x; // Get X Offset Let Index = Math.Floor (Offset / DevWidth); // Calculate the current page number this.setState by offset ({PageIndex : index}}  <zodiac.length;i++){
  //判断是否为当前页,若为当前页则指示点color为蓝色,否则为白色
  if (i===this.state.pageIndex){
   jsx.push(   Set the timer to let the view automatically replace, let PageIndex automatically +1 over SETINTERVAL, then let the picture shift to the picture corresponding to the page number, The page parallel is the offset corresponding to the current page by each page width:   
setTimer () {this.timer = setInterval (() => {this .setState => {// Update PageIndex if (Prestate.pageIndex> = (zodiac.length-1)) {// If the page number reaches the upper bound, it returns zero return {pageIndex: 0}} else {return {pageindex: preState.pageIndex + 1} // otherwise page number plus one}}); / / Let the picture corresponding to the page number Page Let Offset = this.State.pageIndex * DevWidth; this.refs.ScrollView.Scrollto ({x: Offset, Y: 0, Animated: true});}, 2000)}

   
()

   

2, List view
  Used to render a set of data of the same type to the page, you only need to define how the data source is rendered with a single component, it will put all data Rendering is completed. For example, the JSON data will be rendered as the right ICON list:  
The use steps are as follows

1. Define the data source, initialization in the Constructor. Create a DataSource object, define the data source iconsource for the external imported JSON data ICONS, the format is as follows:

let iCons = Require (‘./ MockData / ICONS .json ‘). Data; constructor (props) {super (props); let DataSource = New ListviEW.DataSource ({RowHaschanged: (R1, R2) => r1! == r2}; this.State = {iconsource: Datasource.clonewiTrows (icons),}} React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析 React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

Where

{RowHaschaged: (R1, R2) => r1! == R2}

is to tell ListView Re-rendering when the data source changes.
2, use in the page, set the data source DataSource, internal style contentContainerStyle, the rendering method of each element renderrow is rendericon
   

3, realize the rendering function rendericon, the default incoming four parameters:

RowData: Data corresponding to each element

sectionID: Element Partition
 RowID: Element ID   Highlighttrow: You can make a row in highlight  
in the Rendericon function Define every Icon icon’s rendering, and return to JSX:

    Rendericon (Rowdata, SectionID, RowID, HighlightRow) {Return (
  • {rowdata.title}
  • 3, use ListView rendering two-dimensional data
DATA in the above example is a one-dimensional array, and the array contains Title and Image field. If DATA is a two-dimensional array, for example

  The one-dimensional element of the DATA array contains Title and Cars, while Cars is an array. Using ListView to render it as a list shown in the first alphabetical class above.     ListView uses DataBlob to store two-dimensional data, the structure is as follows:     DataBLOB follows a certain Format Tissue 2D data, as above. DataBlob first stores the first dimension section of the array and assigns an ID, such as "Title": "a" to the top of the one-dimensional array: "a", stored as DataBlob [0] = "Title": "a", assign sectionID to 0 , "Title": "B", stored as DataBlob [1] = "Title": "B", allocating ID is 1 ... Push it by this class. 
After the array is stored, for example “CARS”: [{“Name”: “Audi”, “icon”: “m_9_100.png”}], its first dimension sectionID is 0, the second dimensional ROWID is 2, store it as DataBlob [0: 2] = {“Name”: “Audi”, “ICON”: “m_9_100.png”}.

ListView use steps are as follows:

1. Setting data source

React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析 Similar to one-dimensional listView, first set State as a DataSource object in the Constructor : React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

this.State = {Cardata: new listview.datasource ({GetSectionData: (dataBlob, sectionID) => dataBlob [sectionID], // set sectionData Obtaining getRowData: (dataBlob, sectionID, rowID) => dataBlob [sectionID + ‘:’ + rowID], // set rowData acquisition mode sectionHeaderHasChanged 🙁 S1, S2) => S1! == S2, // Settings section update: (R1, R2) => R1! == R2 // Set ROW update method}}

In the new DataSource object, you need to pass four function parameters React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析 React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

GetSectionData: Define how to get section, it receives two parameters, DataBlob objects and sectionid, for example to get above DataBlob [0] = “Title”: “a”, you can return “title”: “a” by DataBlob [sectionID].

GETROWDATA: Get ROW’s way, the same, can get {“name”: “Audi”, “icon”: “m_9_100.png”}

SectionHeaderHaschanged: Defining when section updates, receives two parameters S1, S2 are two states before and after, and will render section

RowHaschanged: Define ROW 2, use listview

to set its data source and rendering method when using List View

   3, realize rendering methods, the method will pass to the parameter RowData and SectionData 

  • Rendercarsection (SectionData) {reburn (
  • {sectionData}
  • )} {RETURN (
{rowdata.name}

4, put data into DataBlob
  Place data into DataBlob after the assembly is mounted And update the data source, make the data to the page   
ComponentDidmount () {this.loadcardata ();} loadCardata () {let datablob = {}, // dataablob object SectionIDS = [], // sectionID array rowids = [], // ROWID array CARS = []; for (let i = 0; i

 It is desirable to be described herein. Help for everyone's React program.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment