Нижняя вкладка React-Native Navigation для всех необходимых экранов - PullRequest
Новая
       38

Нижняя вкладка React-Native Navigation для всех необходимых экранов

0 голосов
/ 30 марта 2019

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

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

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

Обновление:

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

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

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

Расход:

  • [Home] содержит [Navbar]
  • [Home] ведет к -> [Feed] через navbar
  • [Домой] ведет к -> [Сообщение] через navbar
  • [Домой] ведет к -> [Профиль] через navbar
  • [Feed] ведет к -> [Post] через обычное onPress ()
  • [Post] содержит [Navbar]
  • [Post] ведет к -> [Feed] через navbar
  • [Post] ведет к -> [Message] через navbar
  • [Пост] ведет к -> [Профиль] через navbar

Код: 

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;
...