react-native - 如何在 React Native 中的多个屏幕中创建不同的顶部选项卡

Question

我希望在不同的屏幕中创建不同的选项卡。这有点难以解释，所以我将发布几张照片来说明我的愿望输出。

我已经使用 createMaterialTopTabNavigator 创建了一个选项卡导航器，但似乎我不能在整个单独的 js 文件中两次应用相同的逻辑。我的javascript相当弱。

这是我的第一个标签导航（新闻源 + 服务）的代码。我希望做同样的事情，除了不同的标签标题。

我的问题是，我将如何实现我的愿望输出？

import {createMaterialTopTabNavigator} from 'react-navigation';
import NewsfeedActivity from './NewsfeedActivity';
import ServiceActivity from './ServiceActivity';



export default createMaterialTopTabNavigator({
    Newsfeed:{screen: NewsfeedActivity},
    Services:{screen:ServiceActivity}
},
{
    initialRouteName:'Services',
    swipeEnabled:true,
    navigationOptions:({navigation})=>({
         header:null

    }),
    tabBarOptions:{
        activeTintColor:'#65FAE9',
        inactiveTintColor:'white',
        allowFontScaling:true,
        indicatorStyle:{borderBottomColor:'#65FAE9', borderBottomWidth:4,},
        style:{backgroundColor:'#515276',paddingBottom:5},
        labelStyle:{fontWeight:'bold',marginTop:'40%'},  
    },     
 },

);

我有的：

我想要创造什么：

Answer 1

您可以嵌套多个导航器。

如果您想要的输出是在 "Newsfeed" 和 "Services" 中具有不同的底部导航，那么您可以传递一个 bottomNavigator 而不是将页面作为屏幕传递

import {createMaterialTopTabNavigator,createBottomTabNavigator} from 'react-navigation';
import NewsfeedActivity from './NewsfeedActivity';
import ServiceActivity from './ServiceActivity';



export default createMaterialTopTabNavigator({
    Newsfeed:{screen: firstBottomNavigation},
    Services:{screen: secondBottomNavigation }
},
{
    initialRouteName:'Services',
    swipeEnabled:true,
    navigationOptions:({navigation})=>({
         header:null

    }),
    tabBarOptions:{
        activeTintColor:'#65FAE9',
        inactiveTintColor:'white',
        allowFontScaling:true,
        indicatorStyle:{borderBottomColor:'#65FAE9', borderBottomWidth:4,},
        style:{backgroundColor:'#515276',paddingBottom:5},
        labelStyle:{fontWeight:'bold',marginTop:'40%'},  
        },     
     },

    ); 

const firstBottomNavigation = createBottomTabNavigator({
FirstTab:{screen FirstTab},
SecondTab: {screen:SecondTab}
})

const secondBottomNavigation = createBottomTabNavigator({
ThirdTab:{screen ThirdTab},
SecondTab: {screen:SecondTab} //You can recycle screens
})

您可以发挥创意，可以尝试将 toptabnavigator 嵌套在 bottomnavigator 中，等等。但是不要让事情变得太复杂，因为如果它对你来说很复杂，想象一下对用户来说会有多难