我使用打字稿在我的 React Native 应用程序中设置了底部选项卡导航器。
我在底部选项卡中有“主页”、“探索”、“票务”和“个人资料”屏幕。
我的工单屏幕仅显示一个简单的文本，当我单击屏幕上的空白区域时，它会自动重定向回主页选项卡，其他选项卡也是如此。
**我正在 macOS 上开发
机器：MacBook Air
操作系统：macOS 索诺玛 14.4.1
内存：8 GB
芯片：苹果M2
我使用的包
“反应本机”：“0.74.2”
“反应导航/底部选项卡”：“^6.5.20”
这是我的代码。
AppStack.tsx
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { AppStackParamList } from "@src/types";
import { SearchEvent } from "@src/screens";
import { BottomStack } from "./BottomStack";
import { EventDetails } from "@src/screens/event-detail/EventDetails";
import { useNavigationLogger } from "@src/hooks/useNavigationLogger";
const { Navigator, Screen } = createNativeStackNavigator<AppStackParamList>();
export function AppStack(): React.JSX.Element {
useNavigationLogger();
return (
<Navigator
screenOptions={{ headerShown: false }}
initialRouteName="BottomStack">
<Screen name="BottomStack" component={BottomStack} />
<Screen name="EventDetail" component={EventDetails} />
<Screen name="SearchEvent" component={SearchEvent} />
</Navigator>
);
}
BottomStack.tsx
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { AppStackParamList } from "@src/types";
import { Home, Explore, Tickets, Profile } from "@src/screens";
import OcticonsHomeIcon from "react-native-vector-icons/Octicons";
import AntDesignSearchIcon from "react-native-vector-icons/AntDesign";
import MaterialCommunityIconsTicketIcon from "react-native-vector-icons/MaterialCommunityIcons";
import AntDesignProfileIcon from "react-native-vector-icons/AntDesign";
import { ViewStyle } from "react-native";
import { colors } from "@src/utils";
interface IconProps {
focused: boolean;
color: string;
size: number;
}
const HomeIcon: React.FC<IconProps> = ({ focused, color, size }) => (
<OcticonsHomeIcon
name={focused ? "home" : "home"}
size={size}
color={color}
/>
);
const SearchIcon: React.FC<IconProps> = ({ focused, color, size }) => (
<AntDesignSearchIcon
name={focused ? "search1" : "search1"}
size={size}
color={color}
/>
);
const TicketIcon: React.FC<IconProps> = ({ focused, color, size }) => (
<MaterialCommunityIconsTicketIcon
name={focused ? "ticket-confirmation" : "ticket-confirmation"}
size={size}
color={color}
/>
);
const ProfileIcon: React.FC<IconProps> = ({ focused, color, size }) => (
<AntDesignProfileIcon
name={focused ? "user" : "user"}
size={size}
color={color}
/>
);
const screenOptions = ({ route }: { route: any }) => ({
tabBarIcon: ({ focused, color, size }: IconProps) => {
switch (route.name) {
case "Home":
return <HomeIcon focused={focused} color={color} size={size} />;
case "Explore":
return <SearchIcon focused={focused} color={color} size={size} />;
case "Tickets":
return <TicketIcon focused={focused} color={color} size={size} />;
case "Profile":
return <ProfileIcon focused={focused} color={color} size={size} />;
default:
return null;
}
},
tabBarActiveTintColor: colors.primary,
tabBarInactiveTintColor: colors.textSecondary,
headerShown: false,
tabBarLabelStyle: {
fontSize: 12,
},
tabBarStyle: {
height: 60,
backgroundColor: colors.black,
justifyContent: "center",
borderTopWidth: 0,
} as ViewStyle,
});
const BottomTab = createBottomTabNavigator<AppStackParamList>();
export function BottomStack(): React.ReactElement {
return (
<BottomTab.Navigator initialRouteName="Home" screenOptions={screenOptions}>
<BottomTab.Screen name="Home" component={Home} />
<BottomTab.Screen name="Explore" component={Explore} />
<BottomTab.Screen name="Tickets" component={Tickets} />
<BottomTab.Screen name="Profile" component={Profile} />
</BottomTab.Navigator>
);
}
门票.tsx
import React from "react";
import { Text, View } from "react-native";
export function Tickets({}): React.JSX.Element {
console.log("Tickets screen rendered");
return (
<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
<Text>this is Tickets screen</Text>
</View>
);
}
个人资料.tsx
import { Nf3Button } from "@src/components/common";
import React from "react";
import { Text, View } from "react-native";
import { useAppDispatch } from "@src/hooks";
import { logout } from "@src/store/slices/user-slice";
export function Profile({}): React.JSX.Element {
const dispatch = useAppDispatch();
return (
<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
<Text>this is profile screen</Text>
<Nf3Button
title="logout"
style={{ alignSelf: "center" }}
onPress={() => dispatch(logout())}
/>
</View>
);
}
我使用自定义挂钩来记录导航状态更改。 这是记录导航状态变化的钩子代码。
useNavigationLogger.ts
import { useEffect } from "react";
import { useNavigation, useNavigationState } from "@react-navigation/native";
export function useNavigationLogger() {
const navigation = useNavigation();
const state = useNavigationState((state) => state);
useEffect(() => {
const unsubscribe = navigation.addListener("state", () => {
console.log("Navigation state changed:", JSON.stringify(state, null, 2));
});
return unsubscribe;
}, [navigation, state]);
}
当我打开应用程序并导航到票证屏幕时，它会记录
LOG Tickets screen rendered
LOG Navigation state changed: undefined
然后当我单击Ticket屏幕的空白区域时，它会记录
LOG Navigation state changed: {
"stale": false,
"type": "stack",
"key": "stack-mb5sp5e4a4kn9dj_0kHvK",
"index": 0,
"routeNames": [
"BottomStack",
"EventDetail",
"SearchEvent"
],
"routes": [
{
"key": "BottomStack-VQT1LwwFSP7qtfSF10J6h",
"name": "BottomStack",
"state": {
"stale": false,
"type": "tab",
"key": "tab-euFwrJf651_yFCB2jAHQJ",
"index": 2,
"routeNames": [
"Home",
"Explore",
"Tickets",
"Profile"
],
"history": [
{
"type": "route",
"key": "Home-qKX3M5AQ2M5H9ATqwSzi6"
},
{
"type": "route",
"key": "Tickets-X9PZhIsfM7R4O4HJtEfI_"
}
],
"routes": [
{
"name": "Home",
"key": "Home-qKX3M5AQ2M5H9ATqwSzi6"
},
{
"name": "Explore",
"key": "Explore-oxyMhsKyagZFlG5oXrFPM"
},
{
"name": "Tickets",
"key": "Tickets-X9PZhIsfM7R4O4HJtEfI_"
},
{
"name": "Profile",
"key": "Profile-5BhwfhOYgLMcFIFt-5Adq"
}
]
}
}
]
}```
所以我不知道发生了什么，但是，我只是卸载应用程序，删除node_modules，podfile，package-lock.json，清理npm缓存，安装pods从xcode重建项目，它修复了有线问题。