Question

我是本机反应的新手，并且我在我的本机应用程序中使用了新的react-navigation v.5。当我在NavigationContainer中同时使用createStackNavigator和createBottomTabNavigator时，出现错误-“未定义不是对象”和“此容器已经注册了另一个导航器。您可能在单个“ NavigationContainer”或“ Screen”下拥有多个导航器。请确保每个导航器位于单独的“屏幕”容器下。” （在React Navigation v.5中）。请告诉我我错了吗？

AppNavigation.tsx

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { MainScreen } from "../screens/MainScreen";
import { PostScreen } from "../screens/PostScreen";
import { AboutScreen } from "../screens/AboutScreen";
import { BookedScreen } from "../screens/BookedScreen";
import { CreateScreen } from "../screens/CreateScreen";
import { THEME } from "../theme";
import { Platform } from "react-native";
import { AppHeaderIcon } from "../components/AppHeaderIcon";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

type RootStackParamList = {
  Main: undefined;
  Post: { postId?: string; date?: string; booked?: boolean };
  About: undefined;
  Booked: undefined;
  Create: undefined;
};

const headerButtons = (title: string, icon: string, callback: () => void) => {
  return (
    <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
      <Item title={title} iconName={icon} onPress={() => callback()} />
    </HeaderButtons>
  );
};

export const AppNavigation = () => {
  const Stack = createStackNavigator<RootStackParamList>();
  const Tab = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Main"
        screenOptions={{
          headerTintColor:
            Platform.OS === "android" ? "white" : THEME.MAIN_COLOR,
          headerStyle: {
            backgroundColor:
              Platform.OS === "android" ? THEME.MAIN_COLOR : "white"
          }
        }}
      >
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={{
            headerTitle: "Мой блог",
            headerRight: () =>
              headerButtons("Сделать фото", "ios-camera", () =>
                console.log("Press camera")
              ),
            headerLeft: () =>
              headerButtons("drower", "ios-menu", () =>
                console.log("Press drower button")
              )
          }}
        />
        <Stack.Screen
          name="Post"
          component={PostScreen}
          options={({ route }) => ({
            headerTitle: `Пост от ${new Date(
              route.params.date
            ).toLocaleDateString()}`,
            headerRight: () =>
              headerButtons(
                "star",
                route.params.booked ? "ios-star" : "ios-star-outline",
                () => console.log("Press star button")
              )
          })}
        />
        <Stack.Screen name="About" component={AboutScreen} />
        <Stack.Screen name="Booked" component={BookedScreen} />
        <Stack.Screen name="Create" component={CreateScreen} />
      </Stack.Navigator>
      <Tab.Navigator>
        <Tab.Screen name="Post" component={PostScreen} />
        <Tab.Screen name="Booked" component={BookedScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

App.tsx

import React, { useState } from "react";
import { AppLoading } from "expo";
import { bootstrap } from "./src/bootstrap";
import { AppNavigation } from "./src/navigation/AppNavigation";

export default function App() {
  const [isReady, setIsReady] = useState(false);

  if (!isReady) {
    //AppLoading - пока не завершится выполнение код дальше не пойдет
    return (
      <AppLoading
        startAsync={bootstrap}
        onFinish={() => setIsReady(true)}
        onError={err => console.log('AppLoading error - ', err)}
      />
    );
  }

  return <AppNavigation />;
}

Answer 1

这是我们希望从身份验证流程中获得的行为：当用户登录时，我们希望放弃身份验证流程的状态并卸载与身份验证相关的所有屏幕，并且当我们按下硬件后退按钮时，希望无法返回到身份验证流程。阅读此内容-https://reactnavigation.org/docs/en/auth-flow.html#render-the-navigator-content

Answer 2

本段帮助我理解：“您可以认为这是因为每个选项卡中都有单独的导航堆栈，而这正是我们在React Navigation中建模的方式。 II修复了我的代码中的一些错误：

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { MainScreen } from "../screens/MainScreen";
import { PostScreen } from "../screens/PostScreen";
import { BookedScreen } from "../screens/BookedScreen";
import { THEME } from "../theme";
import { Platform } from "react-native";
import { AppHeaderIcon } from "../components/AppHeaderIcon";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

type RootStackParamList = {
  Main: undefined;
  Post: { postId?: string; date?: string; booked?: boolean };
  About: undefined;
  Booked: undefined;
  Create: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

const headerButtons = (title: string, icon: string, callback: () => void) => {
  return (
    <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
      <Item title={title} iconName={icon} onPress={() => callback()} />
    </HeaderButtons>
  );
};

function PostNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTintColor: Platform.OS === "android" ? "white" : THEME.MAIN_COLOR,
        headerStyle: {
          backgroundColor:
            Platform.OS === "android" ? THEME.MAIN_COLOR : "white"
        }
      }}
    >
      <Stack.Screen
        name="Main"
        component={MainScreen}
        options={{
          headerTitle: "Мой блог",
          headerRight: () =>
            headerButtons("Сделать фото", "ios-camera", () =>
              console.log("Press camera")
            ),
          headerLeft: () =>
            headerButtons("drower", "ios-menu", () =>
              console.log("Press drower button")
            )
        }}
      />
      <Stack.Screen
        name="Post"
        component={PostScreen}
        options={({ route }) => ({
          headerTitle: `Пост от ${new Date(
            route.params.date
          ).toLocaleDateString()}`,
          headerRight: () =>
            headerButtons(
              "star",
              route.params.booked ? "ios-star" : "ios-star-outline",
              () => console.log("Press star button")
            )
        })}
      />
    </Stack.Navigator>
  );
}

function BookedNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTintColor: Platform.OS === "android" ? "white" : THEME.MAIN_COLOR,
        headerStyle: {
          backgroundColor:
            Platform.OS === "android" ? THEME.MAIN_COLOR : "white"
        }
      }}
    >
      <Stack.Screen
        name="Booked"
        component={BookedScreen}
        options={{
          headerTitle: "Избранное",
          headerRight: () =>
            headerButtons("Сделать фото", "ios-camera", () =>
              console.log("Press camera")
            )
        }}
      />
      <Stack.Screen
        name="Post"
        component={PostScreen}
        options={({ route }) => ({
          headerTitle: `Пост от ${new Date(
            route.params.date
          ).toLocaleDateString()}`,
          headerRight: () =>
            headerButtons(
              "star",
              route.params.booked ? "ios-star" : "ios-star-outline",
              () => console.log("Press star button")
            )
        })}
      />
    </Stack.Navigator>
  );
}

export const AppNavigation = () => {
  const Tab = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === "Post") {
              iconName = focused ? "ios-list-box" : "ios-list";
            } else if (route.name === "Booked") {
              iconName = focused ? "ios-star" : "ios-star-outline";
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          }
        })}
        tabBarOptions={{
          activeTintColor: THEME.MAIN_COLOR,
          inactiveTintColor: "gray"
        }}
      >
        <Tab.Screen name="Post" component={PostNavigator} 
        options={{
          tabBarLabel: 'Все посты'
        }}/>
        <Tab.Screen name="Booked" component={BookedNavigator}
        options={{
          tabBarLabel: 'Избранное'
        }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

React Navigation v.5中的createStackNavigator和createBottomTabNavigator

2 个答案: