反应本机导航。如何将组件添加到底部堆栈导航器但不显示它

Question

我想在底部堆栈导航器中添加一个组件（比如说“Autobus”），这样它将接收“navigation”参数，并且我将能够导航到“Autobus”组件 - navigation.navigate('Autbous')。但是，我不想在“Tab.Navigator”中实际显示“Autobus”组件。

我有以下代码：

import React from 'react'
import { Ionicons } from '@expo/vector-icons'
import { StyleSheet, View, TouchableOpacity } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import THEME from '../theme'
import PostsScreen from '../screens/PostsScreen'
import CreateScreen from '../screens/CreateScreen'
import ProfileScreen from '../screens/ProfileScreen'

const Tab = createBottomTabNavigator()

const Tabs = () => {
    return (
        <Tab.Navigator
            initialRouteName='Posts'
            screenOptions={{
                tabBarShowLabel: false,
                tabBarStyle: { ...styles.tab, ...styles.shadow }
            }}
        >
            <Tab.Screen
                name='Profile'
                component={ProfileScreen}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <CustomTabIcon focused={focused} iconName='person' />
                    )
                }}
            />
            <Tab.Screen
                name='Create'
                component={CreateScreen}
                options={{
                    // tabBarShowLabel: true,
                    tabBarIcon: ({ focused }) => (
                        <CustomTabIcon focused={focused} iconName='add' />
                    ),
                    tabBarButton: props => <CustomCircleButton {...props} />
                }}
            />
            <Tab.Screen
                name='Posts'
                component={PostsScreen}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <CustomTabIcon focused={focused} iconName='search' />
                    )
                }}
            />
        </Tab.Navigator>
    )
}

const CustomTabIcon = ({ focused, iconName }) => {
    return (
        <Ionicons
            size={24}
            color={THEME.INFO_COLOR}
            name={focused ? iconName : `${iconName}-outline`}
        />
    )
}

const CustomCircleButton = ({ children, onPress }) => {
    return (
        <TouchableOpacity
            onPress={onPress}
            style={{
                ...styles.center,
                ...styles.shadow
            }}
        >
            <View style={styles.circle}>{children}</View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    tab: {
        position: 'absolute',
        bottom: 15,
        left: 20,
        right: 20,
        elevation: 0,
        backgroundColor: 'white',
        borderRadius: 15,
        height: 70
    },
    shadow: {
        shadowColor: '#7f5df0',
        shadowOffset: {
            width: 0,
            height: 10
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.5,
        elevation: 5
    },
    center: {
        top: -20,
        justifyContent: 'center',
        alignItems: 'center'
    },
    circle: {
        width: 70,
        height: 70,
        borderRadius: 35,
        backgroundColor: THEME.DANGER_COLOR
    }
})

export default Tabs

Answer 1

您需要为嵌套导航创建堆栈导航器（底部标签/顶部标签/单独的屏幕）

阅读更多https://reactnavigation.org/docs/nesting-navigators/

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();

const Stack = createNativeStackNavigator();  


const Tabs = () => {
    return (
        <Tab.Navigator initialRouteName='Posts'>
            <Tab.Screen name='Profile' component={ProfileScreen}/>
            <Tab.Screen name='Create' component={CreateScreen}/>
            <Tab.Screen name='Posts' component={PostsScreen}/>
        </Tab.Navigator>
    )
}

const App = () => {
   return(
    <NavigationContainer>
     <Stack.Navigator initialRouteName='Tabs'>
      <Stack.Screen name="Tabs" component={Tabs} /> // bottom tabs will be base screen
      <Stack.Screen name = "Autobus" commponent={Autobus} />
    </Stack.Navigator>
  </NavigationContainer>
  )
}