mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-27 22:54:46 +08:00
Updates from Fri Feb 13
- [ReactNative] Fix throttle warning and warn in callback instead of render | Christopher Chedeau - [react-packager][streamline oss] Remove react-page-middleware | Amjad Masad - [ReactNative] Turn on perf measurement around a group feed load | Jing Chen - Implemented Layout animations | Nick Lockwood - [ReactNative] Revert D1815137 - avoid dropping touch start on missing target | Eric Vicenti - Moved RKPOPAnimationManager into FBReactKitComponents | Nick Lockwood - Extracted RKAnimationManager | Nick Lockwood
This commit is contained in:
Spencer Ahrens
250
Examples/UIExplorer/ListViewPagingExample.js
Normal file
250
Examples/UIExplorer/ListViewPagingExample.js
Normal file
@@ -0,0 +1,250 @@
|
||||
/**
|
||||
* Copyright 2004-present Facebook. All Rights Reserved.
|
||||
*
|
||||
* @providesModule ListViewPagingExample
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
Image,
|
||||
LayoutAnimation,
|
||||
ListView,
|
||||
ListViewDataSource,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var PAGE_SIZE = 4;
|
||||
var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
|
||||
var NUM_SECTIONS = 100;
|
||||
var NUM_ROWS_PER_SECTION = 10;
|
||||
|
||||
var Thumb = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {thumbIndex: this._getThumbIdx(), dir: 'row'};
|
||||
},
|
||||
_getThumbIdx: function() {
|
||||
return Math.floor(Math.random() * THUMB_URLS.length);
|
||||
},
|
||||
_onPressThumb: function() {
|
||||
var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
|
||||
LayoutAnimation.configureNext(config);
|
||||
this.setState({
|
||||
thumbIndex: this._getThumbIdx(),
|
||||
dir: this.state.dir === 'row' ? 'column' : 'row',
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<TouchableOpacity onPress={this._onPressThumb}>
|
||||
<View style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
|
||||
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
|
||||
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
|
||||
<Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
|
||||
{this.state.dir === 'column' ?
|
||||
<Text>
|
||||
Oooo, look at this new text! So awesome it may just be crazy.
|
||||
Let me keep typing here so it wraps at least one line.
|
||||
</Text> :
|
||||
<Text />
|
||||
}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ListViewPagingExample = React.createClass({
|
||||
statics: {
|
||||
title: '<ListView> - Paging',
|
||||
description: 'Floating headers & layout animations.'
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
var getSectionData = (dataBlob, sectionID) => {
|
||||
return dataBlob[sectionID];
|
||||
};
|
||||
var getRowData = (dataBlob, sectionID, rowID) => {
|
||||
return dataBlob[rowID];
|
||||
};
|
||||
|
||||
var dataSource = new ListViewDataSource({
|
||||
getRowData: getRowData,
|
||||
getSectionHeaderData: getSectionData,
|
||||
rowHasChanged: (row1, row2) => row1 !== row2,
|
||||
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
|
||||
});
|
||||
|
||||
var dataBlob = {};
|
||||
var sectionIDs = [];
|
||||
var rowIDs = [];
|
||||
for (var ii = 0; ii < NUM_SECTIONS; ii++) {
|
||||
var sectionName = 'Section ' + ii;
|
||||
sectionIDs.push(sectionName);
|
||||
dataBlob[sectionName] = sectionName;
|
||||
rowIDs[ii] = [];
|
||||
|
||||
for (var jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
|
||||
var rowName = 'S' + ii + ', R' + jj;
|
||||
rowIDs[ii].push(rowName);
|
||||
dataBlob[rowName] = rowName;
|
||||
}
|
||||
}
|
||||
return {
|
||||
dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
|
||||
headerPressCount: 0,
|
||||
};
|
||||
},
|
||||
|
||||
renderRow: function(rowData, sectionID, rowID) {
|
||||
return (<Thumb text={rowData}/>);
|
||||
},
|
||||
|
||||
renderSectionHeader: function(sectionData, sectionID) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.text}>
|
||||
{sectionData}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
var headerLikeText = this.state.headerPressCount % 2 ?
|
||||
<View><Text style={styles.text}>1 Like</Text></View> :
|
||||
null;
|
||||
return (
|
||||
<TouchableOpacity onPress={this._onPressHeader}>
|
||||
<View style={styles.header}>
|
||||
{headerLikeText}
|
||||
<View>
|
||||
<Text style={styles.text}>
|
||||
Table Header (click me)
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
|
||||
renderFooter: function() {
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
<Text onPress={() => console.log('Footer!')} style={styles.text}>
|
||||
Table Footer
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<ListView
|
||||
style={styles.listview}
|
||||
dataSource={this.state.dataSource}
|
||||
onChangeVisibleRows={(visibleRows, changedRows) => console.log({visibleRows, changedRows})}
|
||||
renderHeader={this.renderHeader}
|
||||
renderFooter={this.renderFooter}
|
||||
renderSectionHeader={this.renderSectionHeader}
|
||||
renderRow={this.renderRow}
|
||||
initialListSize={10}
|
||||
pageSize={PAGE_SIZE}
|
||||
scrollRenderAheadDistance={2000}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
_onPressHeader: function() {
|
||||
var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
|
||||
LayoutAnimation.configureNext(config);
|
||||
this.setState({headerPressCount: this.state.headerPressCount + 1});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
listview: {
|
||||
backgroundColor: '#B0C4DE',
|
||||
},
|
||||
header: {
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#3B5998',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
text: {
|
||||
color: 'white',
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
rowText: {
|
||||
color: '#888888',
|
||||
},
|
||||
thumbText: {
|
||||
fontSize: 20,
|
||||
color: '#888888',
|
||||
},
|
||||
buttonContents: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginHorizontal: 5,
|
||||
marginVertical: 3,
|
||||
padding: 5,
|
||||
backgroundColor: '#EAEAEA',
|
||||
borderRadius: 3,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
img: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
marginHorizontal: 10,
|
||||
},
|
||||
section: {
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
padding: 6,
|
||||
backgroundColor: '#5890ff',
|
||||
},
|
||||
});
|
||||
|
||||
var animations = {
|
||||
layout: {
|
||||
spring: {
|
||||
duration: 0.75,
|
||||
create: {
|
||||
duration: 0.3,
|
||||
type: LayoutAnimation.Types.easeInEaseOut,
|
||||
property: LayoutAnimation.Properties.opacity,
|
||||
},
|
||||
update: {
|
||||
type: LayoutAnimation.Types.spring,
|
||||
springDamping: 0.4,
|
||||
},
|
||||
},
|
||||
easeInEaseOut: {
|
||||
duration: 0.3,
|
||||
create: {
|
||||
type: LayoutAnimation.Types.easeInEaseOut,
|
||||
property: LayoutAnimation.Properties.scaleXY,
|
||||
},
|
||||
update: {
|
||||
delay: 0.1,
|
||||
type: LayoutAnimation.Types.easeInEaseOut,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var layoutAnimationConfigs = [
|
||||
animations.layout.spring,
|
||||
animations.layout.easeInEaseOut,
|
||||
];
|
||||
|
||||
module.exports = ListViewPagingExample;
|
||||
@@ -24,6 +24,7 @@ var EXAMPLES = [
|
||||
require('./ExpandingTextExample'),
|
||||
require('./ImageExample'),
|
||||
require('./ListViewSimpleExample'),
|
||||
require('./ListViewPagingExample'),
|
||||
require('./NavigatorIOSExample'),
|
||||
require('./StatusBarIOSExample'),
|
||||
require('./PointerEventsExample'),
|
||||
|
||||
Reference in New Issue
Block a user