58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
|
import React from "react";
|
||
|
|
|
||
|
|
import theme from "../config/themes";
|
||
|
|
|
||
|
|
import { Text, View, TouchableOpacity, FlatList, Image } from 'react-native';
|
||
|
|
|
||
|
|
export default class HomeScreen extends React.Component {
|
||
|
|
state = {
|
||
|
|
dataSource: [],
|
||
|
|
debug: "deeeebug"
|
||
|
|
};
|
||
|
|
handleScroll = e => {
|
||
|
|
const el = e.nativeEvent;
|
||
|
|
this.setState({
|
||
|
|
debug: `${el.contentOffset.y.toFixed(2)}px`
|
||
|
|
});
|
||
|
|
};
|
||
|
|
handleLayout = e => {
|
||
|
|
console.log(e.nativeEvent.layout);
|
||
|
|
};
|
||
|
|
|
||
|
|
async componentDidMount() {
|
||
|
|
const res = await (await fetch("https://dev.f0ck.me/api/p?eps=54")).json();
|
||
|
|
const items = res.items.map(e => ({
|
||
|
|
id: e.id,
|
||
|
|
src: `https://f0ck.me/t/${e.id}.png`
|
||
|
|
}));
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
dataSource: items
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<View style={{ flex: 1, backgroundColor: theme.background }}>
|
||
|
|
<Image source={{ uri: theme.logo }} style={{ width: 112, height: 28, marginTop: 16 }} />
|
||
|
|
<Text style={{ color: "#fff", fontWeight: "bold", textAlign: "right" }}>{this.state.debug}</Text>
|
||
|
|
|
||
|
|
<FlatList
|
||
|
|
data={this.state.dataSource}
|
||
|
|
onScroll={this.handleScroll}
|
||
|
|
onLayout={this.handleLayout}
|
||
|
|
renderItem={({ item }) => (
|
||
|
|
<View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
|
||
|
|
<TouchableOpacity key={item.id} style={{ flex: 1 }} >
|
||
|
|
<Image style={{ height: 128, width: 128 }} source={{ uri: item.src }} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
)}
|
||
|
|
numColumns={4}
|
||
|
|
keyExtractor={(item, index) => index.toString()}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|