react-native - 所有必需屏幕的 React-Native Navigation 底部选项卡

Question

我正在处理底部导航栏。我正在关注此文档：https ://reactnavigation.org/docs/en/material-bottom-tab-navigator.html

它运作良好，我有 3 个不同的选项卡Feed：Messages和Profile. 但是从我的Feed屏幕它会导致其他屏幕，例如Post.

问题：当我在Feed屏幕上单击时，Post我将被重定向到新页面（显示帖子），但它没有包含底部栏。请注意，我不想包含Post在标签中。我想要 3 个选项卡：[Feed, Messages, Profile]但是Post加载时导航栏必须可见。我该如何做到这一点？

更新：

Feed 有一个罐子列表，当点击帖子时，我调用：this.props.navigation.navigate('Post') 来加载新页面。

流定义：

• [主页] - 主屏幕
• [消息] - 消息屏幕
• [个人资料] - 个人资料屏幕
• [发布] - 发布屏幕
• [NavBar] - 导航栏包括 3 个按钮，它们将通向 -> 3 个不同的屏幕 - Feed、Message、Profile

流动：

• [主页] 包含 [导航栏]
• [Home] 通过导航栏指向 -> [Feed]
• [主页] 通过导航栏指向 -> [消息]
• [主页] 通过导航栏指向 -> [个人资料]
• [Feed] 通过常规 onPress() 导致 -> [Post]
• [帖子] 包含 [导航栏]
• [发布] 通过导航栏导致 -> [Feed]
• [发布] 通过导航栏导致 -> [消息]
• [发布] 通过导航栏指向 -> [个人资料]

代码：

import React from 'react';
import {Text, StyleSheet, AsyncStorage} from 'react-native';

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

import HomeScreen from "./screens/HomeScreen";
import OtherScreen from "./screens/OtherScreen";
import Feed from "./screens/post/Feed";
import SignInUpGender from "./screens/registration/SignInUpGender";
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";

const MaterialBottomTabNavigator = createMaterialBottomTabNavigator(
    {
        Screen1: Feed,
        Screen2: Messages,
        Screen3: Profile,
    },
    {
        initialRouteName: 'Screen1',
        activeColor: '#f0edf6',
        inactiveColor: '#3e2465',
        barStyle: { backgroundColor: '#694fad' },
    }
);

const AppStack = createStackNavigator({
    Home: MaterialBottomTabNavigator,
    Other: OtherScreen
});
const AuthStack = createStackNavigator({
    SignInUp: {
        screen: SignInUpGender,
        navigationOptions: {
            header: null
        }
    }
});

const switchNavigator = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: AuthStack,
    },
    {
        initialRouteName: 'AuthLoading',
    });

const AppContainer = createAppContainer(switchNavigator);

const store = createStore(() => {});
class App extends React.Component{
    render (){
        return (
            <Provider store={store}>
                <AppContainer/>
            </Provider>
        )
    }
}

export default App;

标签： react-nativereact-navigationnavigationbar