React Native 嵌套导航 - 共享组件

Question

使用 React Navigation 6，是否可以让两个不同的 Navigator 导航到同一路线？

简而言之，我正在尝试拥有一个“共享”组件，它 (1) 在启动时加载，并且 (2) 在使用后底部（从“主”屏幕导航后）后可以导航到) 或单击 BottomNav 图标。

我的 App.js 中有以下内容（为清楚起见，删除了无关的导入）。我想要做的是在一条路线内使用 Stack Navigation (Home.jsx)。该路线（Home）也是 BottonNav 的第一条路线。我尝试了多种方法，但要么我收到“允许需要循环，但可能导致未初始化的值”警告，然后页面无法加载。或者我收到有关嵌套导航容器的错误。我确实查看了嵌套导航的反应导航页面上的代码，但它似乎没有解决我要解决的情况：基本上共享 component/route。我可能只是在两个不同的屏幕上复制代码，但显然这不是一个理想的解决方案。

谢谢。

import 'react-native-gesture-handler';
import React, {useState} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <Stack.Screen name="Music" component={Music} options={{ headerShown: false }} />
      <Stack.Screen name="History" component={History} options={{ headerShown: false }} />
      <Stack.Screen name="Tasks" component={Tasks} options={{ headerShown: false }} />
    </Stack.Navigator>

  )
}

const TabNavigator = () => { 
  return(  
        <Tab.Navigator>
        <Tab.Screen name="Home" component={ Home } />
        <Tab.Screen name="Ideas" component={ Ideas } />
        <Tab.Screen name="Calendar" component={ Calendar } />
      </Tab.Navigator>

  )
}


export default function App() {

  return (
    <View style={{paddingTop: StatusBar.currentHeight, flex: 1}}>
    <ThemeProvider theme={ theme }>
    <NavigationContainer>
        <TabNavigator />
    </NavigationContainer>
    </ThemeProvider>
    <ExpoStatusBar style='auto'></ExpoStatusBar>
    </View>
  );
}

Answer 1

您应该将 TabNavigator 放在 HomeStack 中并呈现 HomeStack 作为您的主要导航器。

...
const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="Tab"> // Make Tab the initialRoute
      <Stack.Screen name="Tab" component={TabNavigator} options={{ headerShown: false }} /> // Include TabNavigator inside HomeStack
      <Stack.Screen name="Music" component={Music} options={{ headerShown: false }} />
      <Stack.Screen name="History" component={History} options={{ headerShown: false }} />
      <Stack.Screen name="Tasks" component={Tasks} options={{ headerShown: false }} />
    </Stack.Navigator>

  )
}
...

export default function App() {

  return (
    <View style={{paddingTop: StatusBar.currentHeight, flex: 1}}>
    <ThemeProvider theme={ theme }>
    <NavigationContainer>
        <HomeStack /> // Render HomeStack instead of TabNavigator
    </NavigationContainer>
    </ThemeProvider>
    <ExpoStatusBar style='auto'></ExpoStatusBar>
    </View>
  );
}

React Native 嵌套导航 - 共享组件

React Native Nested Navigation - Shared Component

android

react-native

react-native-navigation