如何在 createBottomTabNavigator 中实现 createMaterialTopTabNavigator

Question

我正在尝试在其中一个选项卡上制作带有 createMaterialTopTabNavigator 的 createBottomTabNavigator。它告诉我路由“TopTabs”的组件必须是一个反应组件。我的根导航器中已经有一个嵌套的选项卡导航器，它没有抛出任何错误，所以我不明白为什么它会在这里抛出错误。任何提示都表示赞赏。

import React, { Component } from 'react';
import { Dimensions, Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Apps from './screens/Apps';
import Garage from './screens/Garage';
import News from './screens/News';
import Chatbot from './screens/Chatbot';
import ViewApp from './screens/ViewApp';
import Login from './components/Login';
import AppItem from './components/AppItem';
import NewApps from './screens/NewApps'; 
import OtherApps from './screens/OtherApps';


let screen = Dimensions.get('window');

export const Tabs = createBottomTabNavigator(
    {
        'TopTabs': {
            screen: TopTabs,
        },

        'Apps': {
            screen: Apps,
            navigationOptions: {
                tabBarLabel: 'Apps',
                tabBarIcon: ({ tintColor }) => <Icon name="apps" type="material-community" size={32} color={tintColor} />,
                tabBarOptions: {
                    activeTintColor: '#2896d3',
                    labelStyle: {
                        fontSize: 14,
                    },
                },
            },
        },

        'News': {
            screen: News,
            navigationOptions: {
                tabBarLabel: 'News',
                tabBarIcon: ({ tintColor }) => <Icon name="newspaper-o" type="font-awesome" size={26} color={tintColor} />,
                tabBarOptions: {
                    activeTintColor: '#2896d3',
                    labelStyle: {
                        fontSize: 14,
                    },
                },
            },
        },
        'Garage': {
            screen: Garage,
            navigationOptions: {
                tabBarLabel: 'Garage',
                tabBarIcon: ({ tintColor }) => <Icon name="garage" type="material-community" size={34} color={tintColor} />,
                tabBarOptions: {
                    activeTintColor: '#2896d3',
                    labelStyle: {
                        fontSize: 14,
                    },
                },
            },
        },
        'Chatbot': {
            screen: Chatbot,
            navigationOptions: {
                tabBarLabel: 'Support',
                tabBarIcon: ({ tintColor }) => <Icon name="ios-person-outline" type="ionicon" size={34} color={tintColor} />,
                tabBarOptions: {
                    activeTintColor: '#2896d3',
                    labelStyle: {
                        fontSize: 14,
                    },
                },
            },
        },
    },
    {
        initialRouteName: 'News',
    }
);

const AppTabs = createMaterialTopTabNavigator({
    Tab1: NewApps,
    Tab2: OtherApps,
}, {
        tabBarOptions: {
            scrollEnabled: true,
            labelStyle: {
                fontSize: 12,
            },
            tabStyle: {
                width: Dimensions.get('window').width / 2,
            },
            style: {
                backgroundColor: 'tomato',
            },
            indicatorStyle: {
                backgroundColor: '#fff'
            }
        },
    });

export const createRootNavigator = () => {
    return createStackNavigator(
        {
            Home: {
                screen: Login,
                navigationOptions: {
                    header: null,
                    gesturesEnabled: false
                }
            },
            Tabs: {
                screen: Tabs,
                navigationOptions: {
                    header: null,
                    gesturesEnabled: false
                }
            },
            ViewApp: {
                screen: ViewApp,
                navigationOptions: {
                    header: null,
                },
            },
        },
        {
            headerMode: "none",
            mode: "modal"
        }
    );
};

export const TopTabs = createMaterialTopTabNavigator(
    {
        'TopTab1': TopTab1,
        'TopTab2': TopTab2,
    },
    {
        initialRouteName: 'TopTab2',
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarOptions: {
            style: {
                paddingTop: Constants.statusBarHeight,
            }
        }
    }
);

class TabScreen extends Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>{this.props.title}</Text></View>
        );
    }
}

class TopTab1 extends Component {
    render() {
        return (<TabScreen title="Top tab1" />);
    }
}

class TopTab2 extends Component {
    render() {
        return (<TabScreen title="Top tab2" />);
    }
}

Answer 1

要在createBottomTabNavigator 中实现createMaterialTopTabNavigator，您可以执行以下操作，我用一个简单的默认示例进行解释：

这是我的createBottomTabNavigator：

export const FooterStack = createBottomTabNavigator(
  {
    First: {
      screen: FirstScreen
    },
    Second: {
      screen: SecondScreen
    },
    Third: {
      screen: BottomStack // Here I Have my createMaterialTopTabNavigator
    }
  }
)

然后我有我的createMaterialTopTabNavigator:

export const BottomStack = createMaterialTopTabNavigator(
  {
    FirstInTopStack: {
      screen: FirstInTopStackScreen
    },
    SecondInTopStack: {
      screen: SecondInTopStackScreen
    }
  }
);