You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

111 lines
2.8 KiB

import React from "react";
import {
StyleSheet,
ScrollView,
SafeAreaView,
Platform,
StatusBar,
LayoutAnimation,
FlatList,
} from "react-native";
import { connect } from "react-redux";
import { blog } from "../../redux/actions";
//components
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Hashtags from "./layouts/Hashtags";
import Header from "./layouts/Header";
import Single from "./layouts/Single";
import New from "./layouts/New";
import Target from "./layouts/Target";
//style
import tw from "tailwind-rn";
function Blogs({ getList, blogs }) {
const [position, setPosition] = React.useState("100%");
React.useEffect(() => {
getList();
}, []);
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: true,
menu: false,
hamburgerMenu: true,
title: "",
bookmark: false,
qr: true,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex px-4")]}
>
<Hashtags />
<Single />
<Header title={"تازهترینها از وبلاگ"} />
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-3")]}
data={blogs}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item) => item.id}
/>
<Header title={"پیشنهاد سردبیر"} />
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-3")]}
data={blogs}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item) => item.id}
/>
<Header title={"از دنیای آموزش"} />
<Target blogs={blogs.slice(0,3)} />
</ScrollView>
</SafeAreaView>
);
}
const mapStateToProps = (state) => ({
blogs: state.blog.list,
});
const mapDispatchToProps = {
getList: blog.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Blogs);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
},
container: {
backgroundColor: "white",
paddingVertical: 0,
paddingHorizontal: 0,
},
});