React Native中Tabs页面导航至Stack页面的问题与需求

1. 调整导航结构（实现同标签页内跳转） #

要在Home标签页内完成表单→Eligibility的跳转返回，不能把Eligibility放在全局主Stack里，而是要给Home标签页单独嵌套一个Stack：

• 修改tabs目录下的_layout.tsx，保持Tabs结构不变：

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: 'Home' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
      <Tabs.Screen name="scan&pay" options={{ title: 'Scan&Pay' }} />
    </Tabs>
  );
}

• 在app/(tabs)/home目录下创建_layout.tsx，作为Home页的Stack导航容器：

// app/(tabs)/home/_layout.tsx
import { Stack } from 'expo-router';

export default function HomeStack() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home Form' }} />
      <Stack.Screen name="eligibility" options={{ title: 'Eligibility' }} />
    </Stack>
  );
}

• 将Eligibility组件移动到app/(tabs)/home/eligibility.tsx，使其成为Home栈的一部分。

2. 修复导航类型错误 #

在Home表单页（app/(tabs)/home/index.tsx）中，给useNavigation指定明确的类型，解决类型推断错误：

// app/(tabs)/home/index.tsx
import { useNavigation } from 'expo-router';
import type { StackNavigationProp } from '@react-navigation/stack';

// 定义Home栈的路由参数类型
type HomeStackParamList = {
  index: undefined;
  eligibility: undefined; // 如果需要传参，可定义参数类型，比如{ userId: string }
};

type HomeNavigationProp = StackNavigationProp<HomeStackParamList, 'index'>;

export default function HomeForm() {
  const navigation = useNavigation<HomeNavigationProp>();

  const handleFormSubmit = () => {
    // 执行表单验证、提交逻辑
    navigation.navigate('eligibility');
  };

  return (
    {/* 你的表单代码，示例按钮触发提交 */}
    <button onPress={handleFormSubmit}>提交表单</button>
  );
}

3. 解决navigation props undefined问题 #

如果表单是拆分的子组件，推荐直接在子组件内用useNavigation钩子，避免props传递出错：

// 子组件示例：FormSection.tsx
import { useNavigation } from 'expo-router';
import type { HomeNavigationProp } from './index';

export default function FormSection() {
  const navigation = useNavigation<HomeNavigationProp>();

  const handleSubmit = () => {
    navigation.navigate('eligibility');
  };

  return <button onPress={handleSubmit}>提交</button>;
}

如果一定要传递props，确保父组件正确获取navigation后再传递：

// 父组件index.tsx中传递
import FormSection from './FormSection';
// ...
<FormSection navigation={navigation} />

4. 效果验证 #

现在提交表单后，会在Home标签页内加载Eligibility页面，点击Stack导航栏的返回按钮会回到表单页面，其他标签页的状态不受影响，完全符合需求。

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