Блог

Я работаю над приложением React Native Expo, в котором у меня есть как навигация по стеку, так и навигация по ящикам. У меня есть вложенный навигатор ящиков внутри моего навигатора стека в app.js . Когда я нажимаю на меню гамбургера в ящике, он открывает ящик с правой стороны. Он отлично работал на всех экранах без каких-либо проблем.

Проблема возникла, когда я решил использовать this.props.navigation.push(«Оплата») для перехода на экран оплаты. Функция OpenDrawer() не передается как часть prop при использовании navigation.push(), тогда как при использовании navigation.navigate() она работает нормально.

Функция OpenDrawer () работает на экране оплаты, когда я перехожу к этому экрану, используя приведенную ниже инструкцию

this.props.navigation.navigate(«Оплата»);

Функция OpenDrawer() выдает ошибку function not found при переходе к этому экрану с помощью инструкции ниже

this.props.navigation.push(«Оплата»);

Ниже мой app.js где я вложил ящик в навигатор стека. Может кто-нибудь посоветовать, как решить проблему. Спасибо!!!

app.js

 import React from "react";
import {
  Dimensions,
  ScrollView,
  Button,
  View,
  SafeAreaView,
} from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  createDrawerNavigator,
  DrawerContentScrollView,
} from "@react-navigation/drawer";

import {
  NavigationContainer,
  useNavigation,
  DrawerItem,
} from "@react-navigation/native";
import Landingzone from "./components/Landingzone";
import LandingPage from "./components/LandingPage";
import Summary from "./components/Summary";
import Payment from "./components/Payment";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Icon, Text } from "react-native-elements";
const myFont = Platform.OS === "ios" ? "Arial" : "sans-serif";

let myFontSize = 15;

const SCREEN_WIDTH = Dimensions.get("window").width;

if (SCREEN_WIDTH > 300 amp;amp; SCREEN_WIDTH <= 360) {
  myFontSize = 10;
} else if (SCREEN_WIDTH > 300 amp;amp; SCREEN_WIDTH <= 415) {
}

export default function App() {
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();

  const DrawerNavigator = () => (
    <Drawer.Navigator
      drawerPosition="right"
      drawerContentOptions={{
        labelStyle: {
          color: "white",
          fontFamily: myFont,
          fontSize: 16,
        },
      }}
      drawerStyle={{
        backgroundColor: "#343a40",
        flex: 1,
        flexDirection: "column",
      }}
      drawerContent={(props) => (
        <DrawerContentScrollView
          contentContainerStyle={{
            flex: 1,
            flexDirection: "column",
          }}
        >
          <View
            style={{
              flex: 0.15,
            }}
          >
            <Icon
              reverse
              name="user-circle-o"
              type="font-awesome"
              color="#517fa4"
              containerStyle={{
                backgroundColor: "green",
                left: 115,
              }}
            />
            <Text>SaimugaTutorials@gmail.com</Text>
          </View>
          <View
            style={{
              flex: 0.1,

              justifyContent: "center",
            }}
          >
            <Text>Enroll</Text>
          </View>
        </DrawerContentScrollView>
      )}
    >
      <Drawer.Screen
        name="Summary"
        component={Summary}
        options={{ headerShown: false }}
      />

      <Drawer.Screen
        name="Payment"
        component={Payment}
        options={{ headerShown: false }}
      />
    </Drawer.Navigator>
  );

  const StackNavigator = () => (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen
        name="Welcome"
        component={LandingPage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Payment"
        component={Payment}
        options={{ headerShown: false }}
      />

      <Stack.Screen
        name="Summary"
        component={DrawerNavigator}
        options={{ headerShown: false, gestureEnabled: false }}
      />
    </Stack.Navigator>
  );

  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}