React Native从内部屏幕导航到底部标签指定屏幕问题

你的核心问题是当前BottomTabs组件使用的是Stack.Navigator而非底部标签导航器，所以导航进去后不会显示底部标签栏。按照以下步骤修改即可：

1. 确保安装底部标签导航依赖 #

首先确认已安装@react-navigation/bottom-tabs：

npm install @react-navigation/bottom-tabs
# 或使用yarn
yarn add @react-navigation/bottom-tabs

2. 重构BottomTabs组件为底部标签导航器 #

将原本的Stack.Navigator替换为Tab.Navigator（来自@react-navigation/bottom-tabs）：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const BottomTabs = () => {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="RootHome" component={RootHome} />
      <Tab.Screen name="Create" component={CreateWorkoutScreen} />
      <Tab.Screen name="Progress" component={MyProgressScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

3. 保持原导航逻辑不变 #

在StartWorkout屏幕中，继续使用以下代码导航即可，此时底部标签栏会正常显示：

navigation.navigate('BottomTabs', { screen: 'Progress' });

进阶：如果需要每个标签页内嵌栈导航 #

如果你的每个标签页需要自己的页面栈（比如从Create页面跳转到子页面），可以给每个标签页单独嵌套Stack.Navigator：

// 定义每个标签页的独立栈
const HomeStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="RootHome" component={RootHome} />
    {/* 可添加Home页的其他子屏幕 */}
  </Stack.Navigator>
);

const CreateStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Create" component={CreateWorkoutScreen} />
    {/* 可添加Create页的其他子屏幕 */}
  </Stack.Navigator>
);

const ProgressStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Progress" component={MyProgressScreen} />
    {/* 可添加Progress页的其他子屏幕 */}
  </Stack.Navigator>
);

const SettingsStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Settings" component={SettingsScreen} />
    {/* 可添加Settings页的其他子屏幕 */}
  </Stack.Navigator>
);

// 组装底部标签导航
const BottomTabs = () => {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Create" component={CreateStack} />
      <Tab.Screen name="Progress" component={ProgressStack} />
      <Tab.Screen name="Settings" component={SettingsStack} />
    </Tab.Navigator>
  );
};

这种情况下导航代码改为：

navigation.navigate('BottomTabs', { screen: 'Progress' });

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