react-native - createMaterialTopTabNavigator 在 react native 的一个屏幕中无法正确呈现

Question

我正在一个屏幕中实现 createMaterialTopTabNavigator 但我的应用程序中没有呈现任何内容。我正在返回 MainNavigator，它是此屏幕的应用程序容器。我是否错误地使用了应用程序容器？如果有误，请指导我如何在 react 导航中使用正确的流程，就像在应用程序中同时使用抽屉导航器、底部导航器和顶部导航器一样。

应用流程:

MainScreenNavigation > MainJobScreen >

MainScreenNavigation代码:

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 代码:acutaly 我正在使用 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 />
        )
    }
}

帮助将不胜感激

提前致谢

Answer 1

兄弟，混合导航堆栈是您的解决方案。

You have to put the tab navigator inside of your main navigator!

当导航堆栈到达 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 中使用导航器，那么主屏幕应该位于选项卡导航堆栈的第一个屏幕中!