更新 属性 'title' 管理的视图时出错：RNScreenStackHeaderConfig (react native)

Question

我的应用程序有一个带有底部选项卡导航器的主屏幕 (HomeScreen.js)，它嵌套在 App.js 中的堆栈导航器中。每当我尝试从主屏幕导航到个人资料屏幕时，我都会收到以下错误：

此错误仅在我尝试将 headerTitle 设置为 App.js 中的自定义组件时发生。有谁知道如何将 ProfileScreen 的 header 正确设置为自定义组件？

我的导航结构如下所示：

• Stack.Navigator
  • Tab.Navigator
    • Food (screen)
    • Friends (screen)
    • Lists (screen)
  • Profile (screen)

我可以在 Tab.Navigator 中将自定义组件设置为 header，但不能在 Profile

中设置

如果需要更多信息，请告诉我。

App.js:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import HomeArea from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import NavBar from "./componets/NavBar";
import BackSVG from "./assets/BackSVG";
import { Text, View } from "react-native";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="HomeArea"
          component={HomeArea}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ProfileScreen"
          component={ProfileScreen}
          options={{
            headerTitle: props => {
              return <Text>Test</Text>;
            }
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js:

import * as React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import FoodScreen from "../screens/FoodScreen";
import FriendsScreen from "../screens/FriendsScreen";
import Lunchlists from "../screens/Lunchlists";
import { StyleSheet, View } from "react-native";
import FoodSVG from "../assets/FoodSVG";
import ListSVG from "../assets/ListSVG";
import FriendsSVG from "../assets/FriendsSVG";
import NavBar from "../componets/NavBar";
import UserSVG from "../assets/UserSVG";

const Tab = createBottomTabNavigator();

export default function HomeScreen({ navigation }) {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: styles.navBar,
        tabBarActiveTintColor: "#fff",
        tabBarShowLabel: false,
        header: () => (
          <NavBar
            symbolRight={UserSVG}
            symbolLeft={View}
            rightPressEvent={() => navigation.navigate("ProfileScreen")}
          />
        )
      }}>
      <Tab.Screen
        name="Food"
        component={FoodScreen}
        options={{
          tabBarLabel: "Food",
          tabBarIcon: ({ color, size }) => {
            return <FoodSVG width={size} height={size} color={color} />;
          }
        }}
      />
      <Tab.Screen
        name="Friends"
        component={FriendsScreen}
        options={{
          tabBarLabel: "Friends",
          tabBarIcon: ({ color, size }) => {
            return <FriendsSVG width={size} height={size} color={color} />;
          }
        }}
      />
      <Tab.Screen
        name="Lunchlists"
        component={Lunchlists}
        options={{
          tabBarLabel: "Lunchlists",
          tabBarIcon: ({ color, size }) => {
            return <ListSVG width={size} height={size} color={color} />;
          }
        }}
      />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  navBar: {
    backgroundColor: "#5A4664"
  }
});

Answer 1

我从错误的包中导入了 createNativeStackNavigator。在 App.js 中，我改为使用 import { createNativeStackNavigator } from "@react-navigation/native-stack"; 导入它，这解决了我的问题。