React Native Knowledge 10-ListView components, react10-listview

React Native Knowledge 10-ListView components, react10-listview

ListView-a core component used to efficiently display a list of changed data that can be vertically rolled. The most basic method is to create a ListView. dataSource data source, then pass it a common data array, then use the data source to instantiate a ListView component, and define its renderRow callback function, this function accepts each data in the array as a parameter and returns a rendered component (as each row of listview ).

ListView also supports some advanced features, such as adding a sticky header (similar to the iPhone Address Book, the first letter will be adsorbed on the top of the screen during the Sliding Process); add separate content to the header and tail of the List; call the callback function (onEndReached) when it reaches the end of the list ), we also call the callback function (onChangeVisibleRows) when the data changes visible in the field of view, as well as some performance optimizations.

There are some performance optimizations that make ListView scroll smoother, especially when loading a dataset that may be large (or conceptually infinitely long) dynamically:

Update only the changed rows-The rowHasChanged function provided to the data source can tell ListView whether a row of data needs to be re-painted (that is, whether the data has changed). For more information, see ListViewDataSource.

Row rendering with limited frequency-by default, only one row in each message loop will be rendered (you can use the pageSize attribute configuration ). This splits large jobs into small fragments to reduce the possibility of Frame loss due to rendering.

 

I. Attributes

1: ScrollView props...

This means that ListView can use all attributes of ScrollView.

2: dataSource ListViewDataSource

3: ListView. DataSource instance (list dependent data sources)

4: initialListSize number

Specifies how many rows of data are rendered when the component is attached. This attribute is used to ensure that a proper amount of data is displayed on the first screen, instead of spending too many frames to display them gradually.

5: onChangeVisibleRows function

(VisibleRows, changedRows) => void

This callback function is called when the set of visible rows changes. VisibleRows contains all visible rows in the format of {sectionID: {rowID: true}, while changedRows uses {sectionID: {rowID: the format of true | false} contains all rows whose visibility has just changed. If the value is true, a row becomes visible, false indicates that the row has just left the visible area and become invisible.

6: onEndReached function

It is called when all the data has been rendered and the list is scrolled to a distance from the bottom of the list to the nearest onEndReachedThreshold pixel. Native rolling events are passed as parameters. Note: during the first rendering, if the data is insufficient for one screen (for example, the initial value is empty), this event will also be triggered.

7: onEndReachedThreshold number

The threshold value before onEndReached is called, in pixels.

8: pageSize number

The number of rows rendered in each event loop (per frame.

9: removappspedsubviews bool

Used to improve the rolling performance of a large list. You need to add a style overflow: 'hiddd' to the row container '. (This style has been added by default for Android ). This attribute is enabled by default.

10: renderFooter function

() => Renderable

The page header and footer are re-rendered during each rendering process (if these attributes are provided ). If they have a high performance overhead, wrap them into a StaticContainer or other appropriate structure. The footer will always be at the bottom of the list, and the page header will be at the top.

11: renderHeader function

RenderRow function

(RowData, sectionID, rowID, highlightRow) => renderable

Accept a piece of Data from the Data source and the ID of it and its section. Returns a rendered component to render this line of data. By default, the data in the parameter is the data in the data source, but some converters can also be provided.

If a row is highlighted (by calling the highlightRow function), The ListView will be notified accordingly. When a line is highlighted, the split lines on both sides are hidden. You can call highlightRow (null) to reset the highlighted state of a row.

12: renderScrollComponent function

(Props) => renderable

Specify a function and return a scrollable component. ListView will be rendered inside the component. By default, a ScrollView containing the specified attribute is returned.

13: renderSectionHeader function

(SectionData, sectionID) => renderable

If this function is provided, a sticky title is rendered for each section.

Stickiness means that when it appears, it will be at the top of the content of the corresponding section; continue to decline when it reaches the top of the screen, it will stay at the top of the screen, until the corresponding position is occupied by the title of the next section.

14: renderSeparator function

(SectionID, rowID, adjacentRowHighlighted) => renderable

If this attribute is provided, a rendered component is rendered under each row, except the last row before the section title. The Section ID and row ID above it, and whether the adjacent rows are highlighted are passed as parameters.

15: scrollRenderAheadDistance number

When a line is close to the screen range, it starts to render the line.

16: iosstickyHeaderIndices [number]

An array of subviews that are used to determine which Members will be fixed at the top of the screen after scrolling. For example, passing stickyHeaderIndices = {[0]} will fix the first member to the top of the scroll view. This attribute cannot be used with horizontal = {true.

 

Ii. Method

1: getMetrics ()

Export data for performance analysis.

2: scrollTo (... args)

Scroll to the specified x or y offset to specify whether to add a transition animation.

Refer to ScrollView # scrollTo.

 

Iii. instance code

import React, { Component } from 'react';
Import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
ListView
} from 'react-native';
class ReactNativeProject extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
Datasource: DS. Clonewithrows (['first line content', 'second line content']),
}
}
Render () {
Return (
<ListView style={styles.contentContainer}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
> >
);
}
}
const styles = StyleSheet.create({
contentContainer: {
marginTop:64,
backgroundColor:"#ff0000",
}
};
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
:

2: graphic line instance

import React, { Component } from 'react';
Import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
ListView,
Image,
TouchableOpacity,
} from 'react-native';
var THUMB_URLS = [
{uri:"http://www.qq745.com/uploads/allimg/150408/1-15040PJ142-50.jpg"},
{uri:"http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"},
{uri:"http://img.lenovomm.com/s3/img/app/app-img-lestore/1993-2015-07-14062642-1436869602788.jpg?isCompress=true&width=342&height=513&quantity=0.8&rotate=true&dk=2"},
{uri:"http://c.hiphotos.baidu.com/exp/whcrop=160,120/sign=57e0ac939058d109c4b6fff0be28f18e/b8389b504fc2d5620f811f00e51190ef77c66c56.jpg"},
{uri:"http://f.hiphotos.baidu.com/exp/whcrop=160,120/sign=c3918fdeba014a90816b10ffc6070423/34fae6cd7b899e51d2350a7841a7d933c8950d26.jpg"},
{uri:"http://f.hiphotos.baidu.com/exp/whcrop=160,120/sign=2aba0e6674c6a7efb973fe64928a9260/902397dda144ad3494292c3ed2a20cf430ad85f1.jpg"},
{uri:"http://v1.qzone.cc/avatar/201503/04/17/44/54f6d3f8ae76c662.jpg%21200x200.jpg"},
{uri:"http://awb.img.xmtbang.com/img/uploadnew/201510/22/8d822cf398d1482fbe3d0ac6208050c4.jpg"},
{uri:"http://awb.img1.xmtbang.com/wechatmsg2015/article201506/20150601/thumb/6abcaf1a9c69496b8d51ec13eabfb5dd.jpg"},
{uri:"http://photo.jokeji.cn/uppic/15-06/27/17424334047046.jpg"},
{uri:"http://imgsrc.baidu.com/forum/w%3D580/sign=7eb05e9eddf9d72a17641015e428282a/3e87194c510fd9f9b3d66fc8212dd42a2a34a4c9.jpg"},
{uri:"http://img3.redocn.com/tupian/20120703/pazaimeinvdatuishangdeheibaichangmaochongwugou_664529_small.jpg"},
];
class ReactNativeProject extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row 10','row 11','row 12']),
}
}
_renderRow(rowData: string, sectionID: number, rowID: number) {
var imgSource = THUMB_URLS[rowID];
Return (
<TouchableOpacity>
<View>
<View style={styles.row}>
<Image style={styles.thumb} source={imgSource} />
<Text style={{flex:1,fontSize:16,color:'blue'}}>
{rowdata + 'I'm the test line No. ~'}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
Render () {
Return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
> >
);
}
}
const styles = StyleSheet.create({
Row: {
flexDirection: 'row',
justifyContent: 'center',
Padding: 10,
backgroundColor: '#F6F6F6',
}
Thumb: {
Width: 50,
Height: 50,
}
};
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject); 

: