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 ，消息，配置文件

流量：

[主页]包含[导航栏]
[主页]通过导航栏指向-> [馈送]
[主页]通过导航栏指向-> [消息]
[首页]通过导航栏指向-> [个人资料]
[Feed]通过常规的onPress（）导致-> [Post]
[发布]包含[导航栏]
[发布]通过导航栏指向-> [订阅源]
[发布]通过导航栏指向-> [消息]
[发布]通过导航栏指向-> [个人资料]

代码：

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-Native导航底部选项卡

0 个答案: