react-native - 如何在 React Navigation 5 中始终保持底部标签

Question

我正在努力弄清楚如何始终保留底部标签。 Application Screen Shoot

抽屉里有 3 件元素:

1. 标签
2. 屏幕 5
3. 屏幕 6

Drawer Screen Shot

当单击屏幕 5 或屏幕 6 时，我想保留底部的选项卡。我如何做到这一点？请帮忙。

Screen 5 Screen Shot

import React from 'react';
import { Platform } from 'react-native';
import { Text, View, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '@expo/vector-icons';

//NAVIGATION 5
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';



//SCREENS
    const styles = StyleSheet.create({
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        }
    });


    const Screen1 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 1</Text>
        </View>
        )
    }
    
    const Screen2 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 2</Text>
        </View>
        )
    }
    
    const Screen3 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 3</Text>
        </View>
        )
    }
    
    const Screen4 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 4</Text>
        </View>
        )
    }

    const Screen5 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 5</Text>
        </View>
        )
    }

    const Screen6 = props => {
        return (
        <View style={styles.container}>
            <Text>Screen 6</Text>
        </View>
        )
    }

//STACKS
    const CustomHeaderButton = props => {
        return(
            <HeaderButton
                {...props}
                IconComponent={Ionicons}
                iconSize={23}
                color='white'
            />
        )
    }

    const defaultStackNavOptions = {
        headerTitleAlign: 'center',
        headerTintColor: 'white',
        headerStyle: {
            backgroundColor: 'black',
        }
    }
   
    const defaultScreenOptions = navData => {
        return {
            headerLeft: () => {
            return(
                <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                <Item 
                    title='Menu' 
                    color='black'
                    iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'} 
                    onPress={() => {
                        navData.navigation.toggleDrawer();
                    }}/>
                </HeaderButtons>
            )
            },
            
        }
    }

    const Screen1StackNavigator = createStackNavigator();
    const Sccreen1Stack = () => {
        return (
            <Screen1StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen1StackNavigator.Screen  name="Stack 1" component={Screen1} options={defaultScreenOptions}/>
            </Screen1StackNavigator.Navigator>
        )
    }

    const Screen2StackNavigator = createStackNavigator();
    const Sccreen2Stack = () => {
        return (
            <Screen2StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen2StackNavigator.Screen  name="Stack 2" component={Screen2} options={defaultScreenOptions}/>
            </Screen2StackNavigator.Navigator>
        )
    }


    const Screen3StackNavigator = createStackNavigator();
    const Sccreen3Stack = () => {
        return (
            <Screen3StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen3StackNavigator.Screen  name="Stack 3" component={Screen3} options={defaultScreenOptions}/>
            </Screen3StackNavigator.Navigator>
        )
    }

    const Screen4StackNavigator = createStackNavigator();
    const Sccreen4Stack = () => {
        return (
            <Screen4StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen4StackNavigator.Screen  name="Stack 4" component={Screen4} options={defaultScreenOptions}/>
            </Screen4StackNavigator.Navigator>
        )
    }

    const Screen5StackNavigator = createStackNavigator();
    const Sccreen5Stack = () => {
        return (
            <Screen5StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen5StackNavigator.Screen  name="Stack 5" component={Screen5} options={defaultScreenOptions}/>
            </Screen5StackNavigator.Navigator>
        )
    }

    const Screen6StackNavigator = createStackNavigator();
    const Sccreen6Stack = () => {
        return (
            <Screen6StackNavigator.Navigator screenOptions={defaultStackNavOptions}>
                <Screen6StackNavigator.Screen  name="Stack 6" component={Screen6} options={defaultScreenOptions}/>
            </Screen6StackNavigator.Navigator>
        )
    }

//BOTTOM TABS
  const AppTabNavigator = Platform.OS === 'android' ? createMaterialBottomTabNavigator() : createBottomTabNavigator();
  const TabNavigator = () => {
    return (
        <AppTabNavigator.Navigator 
            barStyle={{backgroundColor: "#f1f1f1" }} 
            activeColor="#007bbf">
                <AppTabNavigator.Screen name="Screen 1" component={Sccreen1Stack} />
                <AppTabNavigator.Screen name="Screen 2" component={Sccreen2Stack} />
                <AppTabNavigator.Screen name="Screen 3" component={Sccreen3Stack} />
                <AppTabNavigator.Screen name="Screen 4" component={Sccreen4Stack} />     
        </AppTabNavigator.Navigator>
    )
}

//DRAWER
    const AppDrawerNavigator = createDrawerNavigator();
    const DrawerNavigator = () => {
        return (
            <AppDrawerNavigator.Navigator>
                    <AppDrawerNavigator.Screen  name="Tabs" component={TabNavigator} />
                    <AppDrawerNavigator.Screen  name="Screen 5" component={Sccreen5Stack} />
                    <AppDrawerNavigator.Screen  name="Screen 6" component={Sccreen6Stack} />
            </AppDrawerNavigator.Navigator>
        )
    }


const TestNavigator = props => {
    return (
        <NavigationContainer>
            <DrawerNavigator />
        </NavigationContainer>
    );
}
export default TestNavigator;

Answer 1

看起来您希望底部选项卡出现在抽屉中的所有屏幕中。因此，您需要为这些屏幕添加选项卡导航器，而不是 Sccreen5Stack 和 Sccreen6Stack。

否则，当您导航到 Sccreen5Stack 时，标签栏显示是没有意义的。选择了哪个选项卡？如果屏幕不在标签导航器中，当标签栏处于焦点状态时如何看到它？