Question

我正在一个屏幕中实现 createMaterialTopTabNavigator ，但是我的应用程序中没有呈现任何内容。我要返回MainNavigator，它是此屏幕的应用容器。我在使用应用容器时是否犯了错误？如果有误，请指导我如何在反应导航中使用适当的流程，例如在应用程序中同时使用抽屉式导航器，底部导航器和顶部导航器。

应用流程：

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 代码：我在哪里使用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中使用导航器，则该主屏幕应该在Tab导航堆栈的第一个屏幕中！

createMaterialTopTabNavigator无法在本地反应中正确显示

1 个答案: