createMaterialTopTabNavigator 无法在本机反应中的一个屏幕中正确渲染

Question

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

应用流程：

主屏幕导航 > 主作业屏幕 >

主屏导航代码：

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 />
        )
    }
}

帮助将不胜感激

提前致谢

Answer 1

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

您必须将选项卡导航器放在主导航器中！

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