Created
March 5, 2015 23:41
-
-
Save jaygarcia/e3e6dd0a2e71cf7ffd7b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require('react-native'); | |
var { | |
Image, | |
ListView, | |
TouchableHighlight, | |
StyleSheet, | |
Text, | |
View, | |
} = React; | |
var ListViewSimpleExample = React.createClass({ | |
getInitialState: function() { | |
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); | |
return { | |
dataSource: ds.cloneWithRows(this._genRows({})), | |
}; | |
}, | |
componentWillMount: function() { | |
this._pressData = {}; | |
}, | |
render: function() { | |
return ( | |
<ListView dataSource={this.state.dataSource} renderRow={this._renderRow}/> | |
); | |
}, | |
_renderRow: function(rowData, sectionID, rowID) { | |
var rowHash = Math.abs(hashCode(rowData)); | |
var imgSource = { | |
uri: THUMB_URLS[rowHash % THUMB_URLS.length], | |
}; | |
return ( | |
<TouchableHighlight onPress={() => this._pressRow(rowID)}> | |
<View> | |
<View style={styles.row}> | |
<Text style={styles.text}> | |
{rowData} | |
</Text> | |
</View> | |
<View style={styles.separator} /> | |
</View> | |
</TouchableHighlight> | |
); | |
}, | |
_genRows: function(pressData) { | |
var dataBlob = []; | |
for (var ii = 0; ii < 100; ii++) { | |
var pressedText = pressData[ii] ? ' (pressed)' : ''; | |
dataBlob.push('Row ' + ii + pressedText); | |
} | |
return dataBlob; | |
}, | |
_pressRow: function(rowID) { | |
this._pressData[rowID] = !this._pressData[rowID]; | |
this.setState({dataSource: this.state.dataSource.cloneWithRows( | |
this._genRows(this._pressData) | |
)}); | |
} | |
}); | |
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 LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.'; | |
/* eslint no-bitwise: 0 */ | |
var hashCode = function(str) { | |
var hash = 15; | |
for (var ii = str.length - 1; ii >= 0; ii--) { | |
hash = ((hash << 5) - hash) + str.charCodeAt(ii); | |
} | |
return hash; | |
}; | |
var styles = StyleSheet.create({ | |
row: { | |
flexDirection: 'row', | |
justifyContent: 'center', | |
padding: 10, | |
backgroundColor: '#F6F6F6', | |
}, | |
separator: { | |
height: 1, | |
backgroundColor: '#CCCCCC', | |
}, | |
thumb: { | |
width: 64, | |
height: 64, | |
}, | |
text: { | |
flex: 1, | |
} | |
}); | |
module.exports = ListViewSimpleExample; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment