React Native 在*同一页面*中使用多个不同的导航器

Question

我有一个移动应用程序，该应用程序提供了多种功能。主要有 2 组功能：特定于用户的功能（如愿望清单等）和一般功能（如新闻、关于我们等）。我是 React Native 的新手，我希望将这 2 个组放在不同的导航“部分”中：特定于用户的内容应位于

BottomTabNavigator

内，而一般内容应位于

DrawerNavigator

内。

我的问题与How to use Multiple Navigators in React Native version 6.x非常相似，但与该问题不同的是，我想在我的选项卡中拥有 different元素。

我尝试将两个导航器嵌套到一个中，如下所示：

import 'react-native-gesture-handler';
import { PaperProvider, MD3LightTheme as DefaultTheme } from 'react-native-paper';
import {SafeAreaView, View, Text} from "react-native";
import {StatusBar} from 'expo-status-bar';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Header from "./components/Header";
/* *screen imports here* */


const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function TabNav() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Wishes" component={ScreenWishlist} />
            <Tab.Screen name="History" component={ScreenHistory} />
        </Tab.Navigator>
    )
}

export default function App()
{
    return (
        <View style={{flex:1, backgroundColor:"#800"}}>
            <SafeAreaView style={{flex:1}}>
                <View style={{flex:1, backgroundColor:"#fff"}}>
                    <PaperProvider theme={theme}>
                        <StatusBar translucent={false} hidden={false} style={"light"} backgroundColor={'#800'} />

                        <NavigationContainer>
                            <Drawer.Navigator screenOptions={{
                                header: Header
                            }}>
                                <Drawer.Screen name="tabs" component={TabNav} />
                                <Drawer.Screen name="News" component={ScreenNews} />
                                <Drawer.Screen name="About" component={ScreenAboutUs} />
                            </Drawer.Navigator>
                        </NavigationContainer>

                    </PaperProvider>
                </View>
            </SafeAreaView>
        </View>
    );
}

这里的问题是我在更改一些屏幕后丢失了底部导航器。

我也尝试过使用两个

NavigationContainer

，如下所示：

import 'react-native-gesture-handler'; // make sure it's at the top and there's nothing else before it
import { PaperProvider, MD3LightTheme as DefaultTheme } from 'react-native-paper';
import {SafeAreaView, View, Text} from "react-native";
import {StatusBar} from 'expo-status-bar';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Header from "./components/Header";
/* *screen imports here* */

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

export default function App()
{
    return (
        <View style={{flex:1, backgroundColor:"#800"}}>
            <SafeAreaView style={{flex:1}}>
                <View style={{flex:1, backgroundColor:"#fff"}}>
                    <PaperProvider>

                        <NavigationContainer>
                            <Drawer.Navigator screenOptions={{
                                header: Header
                            }}>
                                <Drawer.Screen name="News" component={ScreenNews} />
                                <Drawer.Screen name="About" component={ScreenAboutUs} />
                            </Drawer.Navigator>
                            
                        </NavigationContainer>

                        <NavigationContainer>
                            <Tab.Navigator>
                                <Tab.Screen name="Wishes" component={ScreenWishlist} />
                                <Tab.Screen name="History" component={ScreenHistory} />
                            </Tab.Navigator>
                        </NavigationContainer>

                    </PaperProvider>
                </View>
            </SafeAreaView>
        </View>
    );
}

这里的问题是，它呈现为有两个不同的屏幕，整个屏幕在中间分开，并且两个屏幕独立工作。我只想一次渲染 1 个屏幕，并且应该覆盖整个屏幕 - 当然除了导航按钮，我希望始终渲染两个导航控制器按钮。

Answer 1

我认为这是不可能的。

您可以使用 Stack Navigator，它不会渲染任何按钮，因此您可以使用 React Native Paper Drawer 和 BottomNavigation 制作自己的按钮。

您可能想突出显示所选的导航菜单，以便用户知道他们在哪个屏幕上。为此，您需要获取当前屏幕的名称并检查每个按钮。您可以像这样获取当前屏幕（来自 ChatGPT）：

const navigation = useNavigation();
const currentScreen = navigation.dangerouslyGetState().routes[navigation.dangerouslyGetState().index].name;

或者您可以在每个屏幕的

useEffect()

中设置全局状态（Redux 或 Context）。