drawer item و navigation

سلام اقا قربانی در مورد بک گراند دادن به drawer item پرسیده بودم کدهامو فرستادم ولی مشکل بزرگترم اینه نمیدانم چطوری از یک کامپوننت چطور یه دیتا رو بفرستم به صفحه دیگه و درست نمایشش بدم از داکیومنت navigation 5 استفاده کردم ولی نمایش نمیده یه لیست عکس دارم میخام وقتی روی یه عکس تاچ شد navigate کنه به صفحه جدید و اون عکس رو فول اسکرین نمایش بده ولی از هر روشی استفاده میکنم نمیشه 

import React, { Component, useState } from "react";

import HomePage from "./HomePage";

import Sidebar from "./SideBar/index";

import { Content } from "native-base";

import { View, Text, Button } from "react-native";

import { NavigationContainer } from "@react-navigation/native";

import {

  createDrawerNavigator,

  DrawerContentScrollView,

  DrawerItemList,

  DrawerItem,

} from "@react-navigation/drawer";

import { createStackNavigator } from "@react-navigation/stack";

import { Ionicons } from "@expo/vector-icons";

import { Style } from "react";

import { Fullscreen } from "./HomePage/ExploreTab/index";



function CustomDrawerContent(props) {

  return (

    <DrawerContentScrollView {...props}>

      <View

        style={{

          height: 200,

          alignContent: "flex-end",

          justifyContent: "flex-end",

          backgroundColor: "blue",

          flexDirection: "column",

          marginTop: -10,

        }}

      >

        <Text style={{ color: "white", margin: 20, fontSize: 18 }}>

          My Wallpaper App

        </Text>

      </View>

      <DrawerItem

        icon={() => <Ionicons name="ios-home" size={24} color="black" />}

        label="Home"

        onPress={() => {

          props.navigation.navigate("Home");

        }}

      />

      <DrawerItem

        icon={() => <Ionicons name="md-call" size={24} color="black" />}

        label="Contact us"

        onPress={() => {

          props.navigation.navigate("Home");

        }}

      />

      <DrawerItem

        icon={() => <Ionicons name="md-apps" size={24} color="black" />}

        label="More Apps"

        onPress={() => {

          props.navigation.navigate("Home");

        }}

      />

    </DrawerContentScrollView>

  );

}



const Drawer = createDrawerNavigator();



const Stack = createStackNavigator();



function MyDrawer() {

  return (

    <Drawer.Navigator

      drawerContent={(props) => <CustomDrawerContent {...props} />}

    >

      <Drawer.Screen name="Home" component={HomePage} />

      <Drawer.Screen name="fullimage" component={Fullscreen} />



      {/* <Drawer.Screen name="Contactus" component={Contactus} />

      <Drawer.Screen name="MoreApps" component={MoreApps} /> */}

    </Drawer.Navigator>

  );

}



class App extends Component {

  constructor(props) {

    super(props);

  }



  render() {

    return (

      <NavigationContainer>



        <MyDrawer/>



      </NavigationContainer>

    );

  }

}



export default App;

import React, { Component, useState, useEffect } from "react";
import {
  StatusBar,
  Text,
  Image,
  Button,
  View,
  FlatList,
  ScrollView,
  StyleSheet,
  Pressable,
} from "react-native";
import { Row, Grid } from "react-native-easy-grid";
import { createStackNavigator } from "@react-navigation/stack";
import { useNavigation } from "@react-navigation/native";

const ImgaeStack = createStackNavigator();

const Fullscreen = ({ route, navigation }) => {
  const { src } = route.params;
  
  // console.log(JSON.stringify(itemsrc))
  return (
    <View style={styles.fullscreen}>
      <Text>test </Text>
      <Image style={styles.fullscreen} source={JSON.stringify(src)} />
    </View>
  );
};

const ExploreTab = () => {
  const [pics, setpics] = useState([
    { id: 1, src: require("../../assets/set3.jpg") },
    { id: 2, src: require("../../assets/set3.jpg") },
    { id: 3, src: require("../../assets/set3.jpg") },
    { id: 4, src: require("../../assets/set3.jpg") },
    { id: 5, src: require("../../assets/set3.jpg") },
  ]);
  const [fullpic, setfulpic] = useState(0);

  const navigation = useNavigation();



  const Items = ({ src }) => {
    return (
      <View style={styles.item}>
        <Pressable onPress={() => combined(src)}>
          {console.log(src)}
          <Image style={styles.image} source={src} />
        </Pressable>
      </View>
    );
  };

  const combined = ({src}) => {
    // setfulpic(src);
    // NavigationFunc(fullpic)
    // console.log(fullpic);
    navigation.navigate("fullimage", {src});
  };

  const renderItem = ({ item }) => (
    <>
      <Items src={item.src} />
    </>
  );

  return (
    <ScrollView style={styles.container}>
      <FlatList
        data={pics}
        renderItem={renderItem}
        numColumns={2}
        keyExtractor={(item) => item.id}
      />
    </ScrollView>
  );
};

export { ExploreTab, Fullscreen };

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    marginTop: StatusBar.currentHeight || 0,
    flexDirection: "row",
    flexWrap: "wrap",
  },
  item: {
    flex: 1,
    flexDirection: "row",
  },
  image: {
    flex: 1,
    width: 200,
    height: 300,
    resizeMode: "stretch",
  },
  fullscreen: {
    width: "200",
    height: "200",
    alignItems: 'center',
    justifyContent: 'center'
    // resizeMode: 'cover'
  },
});