在TabNavigator中包含StackNavigator并设置其标题（直接设置HeaderTitle标题不显示）

最新推荐文章于 2023-04-16 04:29:04 发布

开航母的贝塔丶

最新推荐文章于 2023-04-16 04:29:04 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/weixin_44501354/article/details/87934625

ReactNative 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种解决React Navigation中TabNavigator标题不显示的方法，通过创建三个StackNavigator并将其作为TabNavigator的子组件，成功实现了自定义标题的显示。

问题：在登录页面点击登录跳转至类似微信的有三个导航栏的，这时在TabNavigator中分别设置三个页面的headerTitle在页面上不起作用。（PS:小白官方文档真的看不懂啊，好乱的官方文档...）

错误代码：

const tabNavigator = createBottomTabNavigator(
    {
        Chat:{
            screen:Chat,
            navigationOptions:{
                headerTitle:'消息',
                tabBarLabel:'消息',
                tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/chat.png')}/>
            }
        },
        People:{    
            screen:People,
            navigationOptions:{
                headerTitle:'联系人',
                tabBarLabel:'联系人',
                tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
            }
        },
        Me:{
            screen:Me,
            navigationOptions:{
                header:null,
                tabBarLabel:'我',
                tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
            }
        }
    },
);

错误页面如下：上面配置的标题没有起作用。。。

解决方法：为TabNavigator中配置的三个页面创建三个StackNavigator,可以在StackNavigator中设置每个页面的HeaderTitle的内容，然后可以在TabNavigator中配置这三个StackNavigator

代码：

const chatStackNavigator = createStackNavigator({
    Chat:{
        screen:Chat,
        navigationOptions:{
            headerTitle:'消息',
        }
    },
    ChatDetail:{
        screen:ChatDetail,
    }
});

const meStackNavigator = createStackNavigator({
    Me:{
        screen:Me,
        navigationOptions:{
            header:null
        }
    },
    MeDetail:{
        screen:MeDetail
    }
});

const peopleStackNavigator = createStackNavigator({
    People:{
        screen:People,
        navigationOptions:{
            headerTitle:'联系人'
        }
    },
    PeopleDetail:{
        screen:PeopleDetail
    }
});


const tabNavigator = createBottomTabNavigator(
    {
        Chat:{
            screen:chatStackNavigator,      // 在screen中配置这三个Stack即可
            navigationOptions:{
                tabBarLabel:'消息',
                tabBarIcon:<Image style={{width:21,height:21}}                        source={require('../src/image/chat.png')}/>
            }
        },
        People:{    
            screen:peopleStackNavigator,
            navigationOptions:{
                tabBarLabel:'联系人',
                tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
            }
        },
        Me:{
            screen:meStackNavigator,
            navigationOptions:{
                tabBarLabel:'我',
                tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
            }
        }
    },
    {
        tabBarPosition:'bottom',
        swipeEnabled:'true',
        animationEnabled:'false',
        tabBarOptions:{
            activeTintColor:'#4BD1D2',
            inactiveTintColor:'#000',
            showLabel:'true',
            showIcon:'true',
            upperCaseLabel:'true',
            pressColor:'#788493',
            pressOpacity:'0.8',
            style: {
                backgroundColor: '#fff',
                paddingBottom: 1,
                borderTopWidth: 0.2,
                paddingTop:1,
                borderTopColor: '#ccc',
            },
            labelStyle: {
                fontSize: 11,
                margin: 1
            },
        }
    }
);


const Main = createAppContainer(tabNavigator);
export default Main;

标签栏已经加上去了，这样做主要是因为在后面的开发中，三个页面还会跳转到其他的页面，所以分开写三个StackNavigator方便以后添加配置。小白填坑！！！

效果实现：