React导航v4删除底部导航器

Question

我正在尝试删除我的底部标签导航器，只为我的Content屏幕。这有没有可能。有人能帮帮我吗？我正在尝试从我的堆栈导航器中删除它。

这是我的代码：

import React from 'react'
//React Navigation imports
import {createStackNavigator, TransitionPresets} from 'react-navigation-stack'
import {createBottomTabNavigator} from 'react-navigation-tabs'
import {createAppContainer} from 'react-navigation'
import Content from '../Screens/Content'
import { FontAwesome } from '@expo/vector-icons';
import GetStarted from '../Screens/GetStarted'
import Edit from '../Screens/Edit'

const ProfileNavigator = createStackNavigator({
    Content: {
        screen: Content,
        navigationOptions:()=>{
            return {
                tabBarVisible:false,
            };
        }
    },
    GetStarted: GetStarted,
}
);

const SecondNavigator = createStackNavigator({
    EditBook: Edit
})
const NavigationBar = createBottomTabNavigator({
    Profile: {screen: ProfileNavigator, navigationOptions:{
        tabBarIcon : (tabInfo) =>{
            return <FontAwesome name="feed" color={tabInfo.tintColor} />
        }
    }},
    Settings: {screen: SecondNavigator, navigationOptions:{
        tabBarIcon : (tabInfo) =>{
            return <FontAwesome name="settings" color={tabInfo.tintColor} />
        },
        title: 'My Cookbook'   
    }},
},
{
    tabBarOptions:{
        activeTintColor: Colors.orange,
        inactiveTintColor: '#B1B1B1',
    },
})
export default createAppContainer(NavigationBar)

Answer 1

您需要创建一个SwitchNavigator，在其中，您将使用您想要的导航器来构建您的屏幕。我将使用您的代码向您展示我的意思。

import React from 'react';
//React Navigation imports
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import Content from '../Screens/Content';
import { FontAwesome } from '@expo/vector-icons';
import GetStarted from '../Screens/GetStarted';
import Edit from '../Screens/Edit';

const NavigationBar = createSwitchNavigator(
    {
        Profile: createBottomTabNavigator({
            screen: Edit,
            navigationOptions: {
                tabBarIcon: tabInfo => {
                    return (
                        <FontAwesome name='feed' color={tabInfo.tintColor} />
                    );
                },
            },
        }),
        Settings: createStackNavigator({
            screen: Content,
            navigationOptions: {
                tabBarIcon: tabInfo => {
                    return (
                        <FontAwesome
                            name='settings'
                            color={tabInfo.tintColor}
                        />
                    );
                },
                title: 'My Cookbook',
            },
        }),
        GetStarted: createStackNavigator({ screen: GetStarted }),
    },
    {
        tabBarOptions: {
            activeTintColor: Colors.orange,
            inactiveTintColor: '#B1B1B1',
        },
    }
);
export default createAppContainer(NavigationBar);

在导航时，您将使用navigation.navigate('KeyName')，其中KeyName在该示例中是'GetStarted‘、'Settings’和'Profile‘。注：BottomTabNavigator仅适用于配置文件键，即编辑屏幕。