反应原生动画侧抽屉导航

Question

我需要一些帮助 我想在单击菜单时导航到该特定页面 我尝试了所有方法但无法解决。下面是我的代码，我只能更改页面标题，但无法一次导航到整个页面

import { StatusBar } from 'expo-status-bar';
import React, { useRef, useState } from 'react';
import { Animated, Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import profile from '../assets/sideDrawer/profile.png';
// Tab ICons...



import userPro from '../assets/sideDrawer/user.png';
import market from '../assets/sideDrawer/market.png';
import exchange from '../assets/sideDrawer/exchange.png';
import discover from '../assets/sideDrawer/lamp.png';
import balance from '../assets/sideDrawer/wallet.png';
import affiliate from '../assets/sideDrawer/sharing.png';
import withdraw from '../assets/sideDrawer/withdraw.png';
import deposit from '../assets/sideDrawer/deposit.png';

import logout from '../assets/sideDrawer/logout.png';
// Menu
import menu from '../assets/sideDrawer/menu.png';
import close from '../assets/sideDrawer/close.png';

// Photo
import photo from '../assets/sideDrawer/photo.jpg';
import { NavigationContainer } from '@react-navigation/native';

const SideDrawer = ({ navigation }) => {
    const [currentTab, setCurrentTab] = useState("Home");
  // To get the curretn Status of menu ...
  const [showMenu, setShowMenu] = useState(false);

  // Animated Properties...

  const offsetValue = useRef(new Animated.Value(0)).current;
  // Scale Intially must be One...
  const scaleValue = useRef(new Animated.Value(1)).current;
  const closeButtonOffset = useRef(new Animated.Value(0)).current;

  return (
    <SafeAreaView style={styles.container}>

      <View style={{ justifyContent: 'center', padding: 40 , marginTop:80}}>
          
       



       

        <View style={{ flexGrow: 1, marginTop: 50 }}>
        
          {TabButton(currentTab, setCurrentTab, "Profile", userPro)}
          {TabButton(currentTab, setCurrentTab, "Market", market)}
          {TabButton(currentTab, setCurrentTab, "Exchange", exchange)}
          {TabButton(currentTab, setCurrentTab, "Discover", discover)}
          {TabButton(currentTab, setCurrentTab, "Balance", balance)}
          {TabButton(currentTab, setCurrentTab, "Affiliate", affiliate)}
          {TabButton(currentTab, setCurrentTab, "Withdraw", withdraw)}
          {TabButton(currentTab, setCurrentTab, "Deposit", deposit)}

        </View>

        <View>
          {TabButton(currentTab, setCurrentTab, "LogOut", logout)}
        </View>

      </View>

      <Animated.View style={{
        flexGrow: 1,
        backgroundColor: 'white',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        paddingHorizontal: 15,
        paddingVertical: 20,
        borderRadius: showMenu ? 15 : 0,
        // Transforming View...
        transform: [
          { scale: scaleValue },
          { translateX: offsetValue }
        ]
      }}>

    
        <Animated.View style={{
          transform: [{
            translateY: closeButtonOffset
          }]
        }}>
          <TouchableOpacity onPress={() => {
            // Do Actions Here....
            // Scaling the view...
            Animated.timing(scaleValue, {
              toValue: showMenu ? 1 : 0.88,
              duration: 300,
              useNativeDriver: true
            })
              .start()

            Animated.timing(offsetValue, {
              // YOur Random Value...
              toValue: showMenu ? 0 : 230,
              duration: 300,
              useNativeDriver: true
            })
              .start()

            Animated.timing(closeButtonOffset, {
              // YOur Random Value...
              toValue: !showMenu ? -30 : 0,
              duration: 300,
              useNativeDriver: true
            })
              .start()

            setShowMenu(!showMenu);
          }}>

            <Image source={showMenu ? close : menu} style={{
              width: 20,
              height: 20,
              tintColor: 'black',
              marginTop: 35,
              marginBottom:10,

            }}></Image>

          </TouchableOpacity>
          <Text style={{
            fontSize: 30,
            fontWeight: 'bold',
            color: 'black',
            paddingTop: 20
          }}>{currentTab}</Text>

          <Image source={photo} style={{
            width: '100%',
            height: 300,
            borderRadius: 15,
            marginTop: 25
          }}></Image>

          <Text style={{
            fontSize: 20,
            fontWeight: 'bold'
            , paddingTop: 15,
            paddingBottom: 5
          }}>Jenna Ezarik</Text>

          <Text style={{
          }}>Techie, YouTuber, PS Lover, Apple Sheep's Sister</Text>
        </Animated.View>

      </Animated.View>

    </SafeAreaView>
  );
}

// For multiple Buttons...
const TabButton = (currentTab, setCurrentTab, title, image) => {
  return (

    <TouchableOpacity onPress={() => {
      if (title == "LogOut") {
        // Do your Stuff...
      } else {
        setCurrentTab(title)
      }
    }}>
      <View style={{
        flexDirection: "row",
        alignItems: 'center',
        paddingVertical: 8,
        backgroundColor: currentTab == title ? 'black' : 'transparent',
        paddingLeft: 13,
        paddingRight: 35,
        borderRadius: 8,
        marginTop: 15
      }}>

        <Image source={image} style={{
          width: 25, height: 26,
          tintColor: currentTab == title ? "#F3BA2F" : "white"
        }}></Image>

        <Text style={{
          fontSize: 15,
          fontWeight: 'bold',
          paddingLeft: 15,
          color: currentTab == title ? "#F3BA2F" : "white"
        }}>{title}</Text>

      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F3BA2F',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
});

export default SideDrawer;

animated side drawer