React Native 不同Stack间的页面导航实现方法

以下方案基于React Navigation 6.x/7.x版本，默认你的导航结构为根导航容器下包含Stack1、Stack2两个独立子栈的嵌套结构，参考配置如下：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator();
const Stack1 = createNativeStackNavigator();
const Stack2 = createNativeStackNavigator();

// Stack1子栈配置
function Stack1Navigator() {
  return (
    <Stack1.Navigator initialRouteName="Screen1">
      <Stack1.Screen name="Screen1" component={Screen1} />
      {/* Stack1其他页面配置 */}
    </Stack1.Navigator>
  )
}

// Stack2子栈配置
function Stack2Navigator() {
  return (
    <Stack2.Navigator initialRouteName="Stack2DefaultScreen">
      <Stack2.Screen name="Stack2DefaultScreen" component={Stack2DefaultScreen} />
      <Stack2.Screen name="Screen2" component={Screen2} />
      {/* Stack2其他页面配置 */}
    </Stack2.Navigator>
  )
}

// 根导航注册
function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{headerShown: false}}>
        <RootStack.Screen name="Stack1" component={Stack1Navigator} />
        <RootStack.Screen name="Stack2" component={Stack2Navigator} />
      </RootStack.Navigator>
    </NavigationContainer>
  )
}

1. 从Stack1的Screen1跳转至Stack2的Screen2 #

直接通过navigation.navigate方法指定目标子栈和子栈内的页面即可，Screen1内跳转代码示例：

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

function Screen1() {
  const navigation = useNavigation();

  const jumpToScreen2 = () => {
    // 第一个参数为目标子栈名，第二个参数指定子栈内要打开的页面
    navigation.navigate('Stack2', { screen: 'Screen2' });
    // 如需给Screen2传参，新增params字段即可：
    // navigation.navigate('Stack2', { screen: 'Screen2', params: { id: 123 } });
  }

  return <Button onPress={jumpToScreen2} title="跳转到Stack2的Screen2" />
}

注意：如果根导航为Tab导航，跳转逻辑完全一致，无需额外修改。

2. 从Stack1直接跳转至Stack2的默认启动页面 #

不需要指定子栈内的页面，直接跳转目标子栈名称即可，React Navigation会自动加载该子栈配置的initialRouteName对应的默认页面：

const jumpToStack2Default = () => {
  navigation.navigate('Stack2');
}

如需给默认页面传参，直接在第二个参数添加参数即可：

navigation.navigate('Stack2', { userId: 456 });
// Stack2的默认页面可通过route.params获取对应参数

常见补充说明 #

• 如果跳转后需要销毁当前Stack1的页面栈，可使用reset方法重置根导航路由栈：

  navigation.reset({
    index: 0,
    routes: [{ name: 'Stack2' }]
  })
  

• 如果你使用TypeScript开发，需要提前在导航类型定义中声明跨栈的页面路径，避免类型报错。

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