Как создать разные главные вкладки на нескольких экранах в 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

Вы можете вкладывать несколько навигаторов.

Если вы хотите, чтобы нижняя навигация отличалась в «Ленте новостей» и отличалась в «Службах», тогда вместо передачи страницы в качестве экрана вы можете передать 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 и т. Д. Но не усложняйте ситуацию, потому что если это сложно для вас, представьте, как тяжело будет для пользователя