Блог

Я работаю над нижней панелью навигации. Я следую этой документации:https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html

Это работает хорошо, у меня есть 3 разных вкладки: Feed , Messages и Profile . Но с моего Feed экрана это приводит к другим экранам, таким как Post .

Проблема: Когда я нахожусь на Feed экране и нажимаю на Post , я перенаправляюсь на новую страницу (do display post), но на ней нет нижней панели. Пожалуйста, обратите внимание, что я не хочу включать Post в качестве вкладки. Я хочу иметь 3 вкладки: [Feed, Messages, Profile] но при Post загрузке панель навигации должна быть видна. Как мне этого добиться?

Обновить:

В ленте есть список вкладок, и при нажатии на публикацию я вызываю: this.props.navigation.navigate('Post ‘), чтобы загрузить новую страницу.

Определение потока:

• [Главная страница] — Начальный экран
• [Сообщение] — Экран сообщения
• [Профиль] — Экран профиля
• [Публикация] — Экран публикации
• [Панель навигации] — Панель навигации включает в себя 3 кнопки, которые ведут к -> 3 различным экранам — Ленте, сообщению, профилю

Поток:

• [Главная страница] содержит [панель навигации]
• [Главная страница] ведет к -> [Лента] через панель навигации
• [Главная страница] ведет к -> [Сообщение] через панель навигации
• [Главная страница] ведет к -> [Профиль] через панель навигации
• [Feed] ведет к -> [Post] с помощью обычного onPress()
• [Сообщение] содержит [панель навигации]
• [Публикация] ведет к -> [Лента] через панель навигации
• [Сообщение] ведет к -> [Сообщение] через панель навигации
• [Публикация] ведет к -> [Профиль] через панель навигации

Код:

 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;