React Navigation v6：底部标签导航器跨栈跳转失败问题求助

核心问题分析 #

问题出在自定义tabBarButton的导航上下文传递错误，或者嵌套栈的路由名称匹配失败，导致无法正确定位到TransactionsStack内的AddIncome屏幕。

分步解决方案 #

1. 确认导航结构正确性

确保你的导航层级是如下正确嵌套结构（关键名称必须完全匹配）：

// 嵌套栈：TransactionsStack
const TransactionsStack = createStackNavigator();
function TransactionsStackScreen() {
  return (
    <TransactionsStack.Navigator>
      <TransactionsStack.Screen 
        name="TransactionsList" // 栈内默认屏幕
        component={TransactionsList} 
      />
      <TransactionsStack.Screen 
        name="AddIncome" // 目标屏幕名称，必须和导航调用时一致
        component={AddIncome} 
      />
    </TransactionsStack.Navigator>
  );
}

// 底部标签导航器：BottomSheetNav
const BottomSheetNav = createBottomTabNavigator();
function BottomSheetNavigator() {
  return (
    <BottomSheetNav.Navigator>
      {/* 其他标签页 */}
      <BottomSheetNav.Screen
        name="Transactions" // 标签页名称，导航调用时需指定这个
        component={TransactionsStackScreen}
        options={{
          tabBarButton: (props) => <AddButton {...props} />, // 传递导航props
        }}
      />
    </BottomSheetNav.Navigator>
  );
}

2. 正确传递导航上下文到ButtonOverlay

自定义tabBarButton时，必须将父导航器的navigation对象传递给子组件ButtonOverlay：

// AddButton组件
import { useState, TouchableOpacity, Text } from 'react-native';

function AddButton({ navigation }) {
  const [showOverlay, setShowOverlay] = useState(false);

  return (
    <>
      <TouchableOpacity onPress={() => setShowOverlay(true)}>
        <Text style={{ fontSize: 24 }}>+</Text>
      </TouchableOpacity>
      {showOverlay && (
        <ButtonOverlay 
          navigation={navigation} 
          onClose={() => setShowOverlay(false)} 
        />
      )}
    </>
  );
}

// ButtonOverlay组件
function ButtonOverlay({ navigation, onClose }) {
  return (
    <View style={{ /* 你的Overlay样式 */ }}>
      <TouchableOpacity 
        onPress={() => {
          // 跨栈导航的正确写法：先指定标签页名称，再指定栈内屏幕
          navigation.navigate("Transactions", { screen: "AddIncome" });
          onClose();
        }}
      >
        <Text>添加收入</Text>
      </TouchableOpacity>
    </View>
  );
}

3. 兜底方案：直接获取根导航对象

如果传递navigation props无效，可在ButtonOverlay中直接用useNavigation hook获取根导航器对象：

import { useNavigation } from '@react-navigation/native';

function ButtonOverlay({ onClose }) {
  const navigation = useNavigation();

  return (
    <View style={{ /* 你的Overlay样式 */ }}>
      <TouchableOpacity 
        onPress={() => {
          navigation.navigate("Transactions", { screen: "AddIncome" });
          onClose();
        }}
      >
        <Text>添加收入</Text>
      </TouchableOpacity>
    </View>
  );
}

4. 排查常见错误点

• 检查所有路由名称的大小写、拼写是否完全一致，比如"AddIncome"不能写成"addIncome"
• 确认TransactionsStack内确实注册了AddIncome屏幕，没有遗漏
• 确保ButtonOverlay组件被包裹在NavigationContainer的上下文范围内，没有脱离导航树

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