createMaterialTopTabNavigator не воспроизводится должным образом на одном экране в реагировать родной - PullRequest
Новая
       17

createMaterialTopTabNavigator не воспроизводится должным образом на одном экране в реагировать родной

0 голосов
/ 29 января 2019

Я реализую createMaterialTopTabNavigator на одном экране, но в моем приложении ничего не отображается.я возвращаю MainNavigator, который является приложением контейнера этого экрана.я делаю ошибку, чтобы использовать контейнеры приложения или нет?если это ошибка, то, пожалуйста, объясните мне, как работать с правильным потоком в реагирующей навигации, как в приложении, используя навигатор ящика, нижний навигатор и верхний навигатор одновременно.

Поток приложения :

MainScreenNavigation> MainJobScreen>

MainScreenNavigation code: 

import React from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";
import {Signin} from "../screens/Signin";
import {Splash} from '../screens/Splash';
import {HomeScreen} from '../screens/Home/HomeScreen'
import {Profile} from '../screens/Profile/Profile'
import {Notifications} from '../screens/Notifications/Notifications'
import {MainJobScreen} from '../screens/JobFeed/MainJobScreen'

export const MainScreenNavigation = createAppContainer(createStackNavigator({
    Home: {
        screen: Splash
    },
    Signin: {
        screen: Signin
    },
    HomeScreen: {
        screen: HomeScreen
    },
    Profile: {
        screen: Profile
    },
    Notifications: {
        screen: Notifications
    },
    JobFeed: {
        screen: MainJobScreen
    }


}));
;

MainJobScreen код: точно, где я использую createMaterialTopNavigator 

import React from 'react'
import {createMaterialTopTabNavigator,createAppContainer,createStackNavigator } from 'react-navigation'

import { AllTab } from './AllTab'
import { ActiveTab} from './ActiveTab'
import { CompletedTab } from './CompletedTab'
import { JobScreen} from './JobScreen'


const TabNavigator = createMaterialTopTabNavigator({
    TabOne: AllTab,
    TabTwo: ActiveTab,
    TabThree: CompletedTab,
},
{
    initialRouteName: 'TabOne',
    tabBarOptions: {
        style: {
            backgroundColor: 'red'
        }
    },
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,

})


TabNavigator.navigationOptions={
    headerTitle: 'JobFeed'
}
const MainNavigator= createAppContainer(createStackNavigator({
    Tabs: TabNavigator,
    MainScreen: JobScreen, 
},{
    initialRouteName: 'MainScreen'
}))


export class MainJobScreen extends React.Component{

    static navigationOptions = {
        headerTitle: 'JobFeed'
    }
    render(){
        return(
            <MainNavigator />
        )
    }
}

Помощь будет высоко ценится

Заранее спасибо

1 Ответ

0 голосов
/ 29 января 2019

Смешивание навигационных стеков - вот ваше решение, брат.

Вы должны поместить навигатор вкладок внутри основного навигатора!

и когда стек навигации попадет на TabScreen, он покажет первый экран по умолчанию для созданного вами навигатора вкладок. 

//....your imports
export const MainScreenNavigation = createAppContainer(createStackNavigator({
    Home: {
        screen: Splash
    },
    Signin: {
        screen: Signin
    },
    HomeScreen: {
        screen: HomeScreen
    },
    Profile: {
        screen: Profile
    },
    Notifications: {
        screen: Notifications
    },
    JobFeed: {
        screen: MainJobScreen
    },
    JobFeed: {
        screen: MainJobScreen
    },
    TabScreen: {
        screen: TabNavigator  //------> add this in your main navigator
    }


}));
;

теперь стек должен выглядеть следующим образом!

файл, экспортирующий ваш главный навигатор, который должен использоваться в вашем App.js

, и в этот стек навигации ваш стек Tabnavigation должен быть добавлен так же, как вы добавляете любой другой экран или так, как показано в коде

ПРИМЕЧАНИЕ!Вы должны отдельно экспортировать TabScreen Navigator из файла!и если вы используете навигатор в файле кода MainScreen, то этот главный экран должен быть на первых экранах стека навигации Tab!

...