React Native中Bottom Tab导航嵌套Stack导航实现问题求助

你的代码存在几个关键问题，以下是修正方案：

问题分析 #

1. Home组件未获取navigation对象：直接调用navigation.navigate会报错，因为没有通过hook或props拿到导航实例。
2. 导航嵌套结构错误：需要将Stack导航作为Tab导航的一个子项，或者把Home页面嵌套在Stack导航内部，才能实现页面间的跳转。
3. 页面名称不匹配：按钮点击目标名称与导航结构中注册的页面名称不一致。

修正后的完整代码 #

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

// 嵌套Stack导航：包含Home和Details页面
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={Home} options={{ title: '首页' }} />
      <Stack.Screen name="Details" component={Details} options={{ title: '详情页' }} />
    </Stack.Navigator>
  );
}

function Home() {
  // 使用useNavigation hook获取导航实例
  const navigation = useNavigation();
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Page</Text>
      <Button
        title="跳转到详情页"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function Details() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details</Text>
    </View>
  );
}

function Profile() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* 将Stack导航作为Tab的一个屏幕 */}
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

关键修改点 #

• 添加useNavigation hook：在Home组件中通过useNavigation()获取导航实例，解决navigation未定义的问题。
• 重构导航嵌套结构：创建HomeStack组件，将Home和Details页面放入Stack导航中，再把这个Stack作为Tab导航的子项。点击按钮时即可在Stack内部跳转，同时保留底部Tab栏。
• 统一页面名称：确保navigate的目标名称与Stack中注册的屏幕名称一致（此处为Details）。

额外说明 #

如果需要点击按钮后隐藏底部Tab栏，可以在Stack的屏幕配置中添加options={{ tabBarStyle: { display: 'none' } }}，或者在跳转时配置对应选项。

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