如何在 React Native 中从选项卡屏幕导航到堆栈屏幕

Question

我是移动应用程序开发的初学者。 我使用命令 -

npx create-expo-app@latest myapp

启动了应用程序。这创建了这样的文件夹结构 -

我认为选项卡文件夹名称中的括号是约定所必需的。在主 _layout.tsx 中，这是内容 -

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs1)" options={{ headerShown: false }} />
        <Stack.Screen name="Eligibility" />
      </Stack>
    </ThemeProvider>

在内部 _layout.tsx 文件中，有类似 -

的选项卡

<Tabs screenOptions={{headerShown: true}}>
        <Tabs.Screen name="index" options={{
          headerTitle: "MyApp",
          title: "Home",
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }} />
      </Tabs>

当我运行该应用程序时，页脚中有一个名为“Home”的选项卡，其内容出现在 index.tsx 文件中。我想导航到选项卡文件夹外部的文件 Eligibility。 我尝试在index.tsx文件中使用它

const navigation = useNavigation();
navigation.navigate('Eligibility)

并像这样更改了外部 _layout.tsx -

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="RootLayout1" options={{ headerShown: false }} component={RootLayout1} />
                <Stack.Screen name="Eligibility" component={Eligibility} />
            </Stack.Navigator>
        </NavigationContainer>
    </ThemeProvider>

RootLayout1 是内部 _layout.tsx 文件，包含以下内容 -

export default function RootLayout1() {
  return (
      <Tabs screenOptions={{headerShown: true}}>
        <Tabs.Screen name="index" options={{
          headerTitle: "Volt",
          title: "Home",
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }} />
      </Tabs>
  );
}

但是我的 navigation.navigate 方法出现错误 -

Argument of type '[string]' is not assignable to parameter of type 'never'.
  Overload 2 of 2, '(options: never): void', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'never'.

我做错了什么？

我还尝试在index.tsx组件的props中传递{navigation}，然后执行navigation.navigate（'Eligibility），但收到错误 - [TypeError：无法读取未定义的属性'navigate']

我想在我的应用程序中有 3 个选项卡，例如 - 主页、个人资料、扫描和支付 在“主页”选项卡中，我希望拥有类似某种表单的基本流程，然后成功后，它应该在同一“主页”选项卡中显示“资格”组件。此外，当我按回此资格组件时，该表单应仅在“主页”选项卡中再次打开。

有什么方法可以处理我的用例吗？

Answer 1

抱歉，我不知道您的主屏幕在哪里，并且我在您的代码中发现了一些约定错误。如果我错了，请改变我：

• <Stack>

  、

  <Tabs>

  ：这是什么？你的意思是来自

  const Stack = createStackNavigator();

  和

  const Tab = createBottomTabNavigator();

  。如果为真，则为语法错误。

• name="(tabs1)"

  、

  name="index"

  ：请不要这样定义 screen/stack/... 的名称。您需要此名称来执行

  navigate

  操作。

我的零食中有一个针对您的案例的小演示。

链接零食：https://snack.expo.dev/@pqv2210/q-78491927。

请检查一下。

如果您有任何疑问，请对此答案发表评论。

欢迎来到 React Native 并快乐编码！