118 lines
2.4 KiB
JavaScript
118 lines
2.4 KiB
JavaScript
// @flow
|
|
import React, { Component } from 'react'
|
|
import { StyleSheet, View, FlatList, Platform, StatusBar } from 'react-native'
|
|
|
|
const getImageUrl = (id, width, height) =>
|
|
`https://unsplash.it/${width}/${height}?image=${id}`
|
|
|
|
class ImageGrid extends Component {
|
|
constructor(props: Object) {
|
|
super(props)
|
|
|
|
fetch('https://unsplash.it/list')
|
|
.then(res => res.json())
|
|
.then(this._onFetchImagesSuccess)
|
|
}
|
|
|
|
state = {
|
|
images: [],
|
|
itemHeight: 0,
|
|
}
|
|
|
|
_onLayout = e => {
|
|
const width = e.nativeEvent.layout.width
|
|
this.setState({
|
|
itemHeight: width / 4,
|
|
})
|
|
}
|
|
|
|
_onFetchImagesSuccess = images => {
|
|
this.setState({
|
|
images,
|
|
})
|
|
}
|
|
|
|
_getItemLayout = (data, index) => {
|
|
const { itemHeight } = this.state
|
|
return { length: itemHeight, offset: itemHeight * index, index }
|
|
}
|
|
|
|
_renderItem = ({ item }) => {
|
|
const ImageComponent = this.props.ImageComponent
|
|
const uri = getImageUrl(item.id, 100, 100)
|
|
return (
|
|
<View style={styles.imageContainer}>
|
|
<ImageComponent source={{ uri }} style={styles.image} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
_extractKey = item => {
|
|
return item.id
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
onLayout={this._onLayout}
|
|
style={styles.list}
|
|
columnWrapperStyle={[
|
|
styles.columnWrapper,
|
|
{ height: this.state.itemHeight },
|
|
]}
|
|
data={this.state.images}
|
|
renderItem={this._renderItem}
|
|
numColumns={4}
|
|
keyExtractor={this._extractKey}
|
|
getItemLayout={this._getItemLayout}
|
|
/>
|
|
<View style={styles.statusBarUnderlay} />
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const MARGIN = 2
|
|
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
|
|
|
|
const styles = StyleSheet.create({
|
|
statusBarUnderlay: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: STATUS_BAR_HEIGHT,
|
|
backgroundColor: 'white',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
alignItems: 'stretch',
|
|
justifyContent: 'center',
|
|
},
|
|
list: {
|
|
marginTop: STATUS_BAR_HEIGHT,
|
|
flex: 1,
|
|
},
|
|
columnWrapper: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
marginLeft: -MARGIN,
|
|
marginRight: -MARGIN,
|
|
},
|
|
image: {
|
|
flex: 1,
|
|
width: null,
|
|
height: null,
|
|
margin: MARGIN,
|
|
backgroundColor: '#eee',
|
|
},
|
|
imageContainer: {
|
|
flex: 1,
|
|
alignItems: 'stretch',
|
|
},
|
|
})
|
|
|
|
export default ImageGrid
|