Question

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

我已经使用createMaterialTopTabNavigator创建了一个标签导航器，但是似乎我无法在整个单独的js文件中两次应用相同的逻辑。我的JavaScript很弱。

这是我的第一个标签导航（newsfeed +服务）代码。我希望做的是完全相同的事情，只是选项卡标题不同。

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

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中，等等。但是不要把事情弄得太复杂，因为如果对您来说太复杂了，请想象对用户来说会有多困难

如何在React Native的多个屏幕中创建不同的顶部标签

1 个答案: