React Native：移除登录页底部Tab导航并设为启动页及传参问题

问题1：登录页显示底部Tab的原因及修复 #

你当前的问题根源是把Login页面直接加入了TabNavigator的路由列表，同时单独写的StackNavigator可能没作为App的入口导航。要实现登录页无Tab、其他页面有Tab的效果，需要采用Stack嵌套Tab的结构：Login作为Stack的初始页面，TabNavigator作为Stack的一个子页面（仅包含WineCatalogue和UserInfo）。

修改后的navigator.js代码： #

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { LoginScreen } from "../screens/LoginScreen";
import { WineCatalogue } from "../screens/WineCatalogue";
import { UserInfoSceen } from "../screens/UserInfoScreen";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 底部Tab导航，只保留需要显示Tab的页面
function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === "WineCatalogue") {
            iconName = focused ? "wine" : "wine-outline";
          } else if (route.name === "UserInfo") {
            iconName = focused ? "person" : "person-outline";
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "darkred",
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen
        name="WineCatalogue"
        component={WineCatalogue}
        options={{
          headerTitle: "Wine Catalogue",
          headerTitleStyle: {
            fontWeight: "bold",
            fontSize: 25,
            paddingBottom: 5,
            color: "white",
          },
          headerStyle: {
            backgroundColor: "darkred",
            shadowColor: "transparent",
            height: 120,
          },
          title: "WINE CATALOGUE",
          tabBarStyle: {
            paddingTop: 5,
          },
        }}
      />
      <Tab.Screen
        name="UserInfo"
        component={UserInfoSceen}
        options={{
          headerTitle: "USER INFO",
          headerTitleStyle: {
            fontWeight: "bold",
            fontSize: 25,
            paddingBottom: 5,
            color: "white",
          },
          headerStyle: {
            backgroundColor: "darkred",
            shadowColor: "transparent",
            height: 120,
          },
          title: "USER INFO",
          tabBarStyle: {
            paddingTop: 5,
          },
        }}
      />
    </Tab.Navigator>
  );
}

// 主Stack导航，包含Login和TabNavigator
export function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen 
          name="Login" 
          component={LoginScreen} 
          options={{ headerShown: false }} // 可选：隐藏登录页头部
        />
        {/* 把TabNavigator作为Stack的子屏幕 */}
        <Stack.Screen 
          name="MainTabs" 
          component={TabNavigator} 
          options={{ headerShown: false }} // 避免双层头部
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

修改LoginScreen的跳转逻辑： #

登录后需要先进入Tab导航容器，再跳转到目标页面（按需求选择WineCatalogue或UserInfo）：

// LoginScreen.js中handleGoogleSignIn的跳转代码修改
setTimeout(
  () => navigation.navigate("MainTabs", { screen: "WineCatalogue", params: { email, name, photoUrl } }),
  1000
);
// 若要直接跳转到UserInfo则改为：
// navigation.navigate("MainTabs", { screen: "UserInfo", params: { email, name, photoUrl } })

修改后，Login页面属于外层Stack，不在Tab导航范围内，不会显示底部Tab；登录后进入Tab导航，WineCatalogue和UserInfo会正常显示Tab栏。

问题2：在UserInfo页面显示传递的参数 #

在UserInfoScreen组件中，通过route.params获取Login页面传递的参数并渲染即可：

UserInfoScreen.js示例代码： #

import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export function UserInfoSceen({ route }) {
  // 解构参数并设置默认值，避免未传参时报错
  const { email = "", name = "", photoUrl = "" } = route.params || {};

  return (
    <View style={styles.container}>
      {photoUrl && <Image source={{ uri: photoUrl }} style={styles.avatar} />}
      <Text style={styles.text}>姓名：{name}</Text>
      <Text style={styles.text}>邮箱：{email}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 60,
    marginBottom: 20,
  },
  text: {
    fontSize: 18,
    marginVertical: 8,
  },
});

无论从外层Stack跳转还是Tab内部跳转，route.params都能正常获取参数，上述写法兼容所有场景。

内容的提问来源于stack exchange，提问作者MSostaric