欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android开发之React Navigation 导航栏样式调整+底部角标消息提示

程序员文章站 2022-06-30 11:26:48
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝...

五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬!
这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是,也是rn社区主推的一个导航库。

网上关于react-navigation的基本使用也是一抓一大把,这里对于它的使用不做过多介绍,主要记录使用过程中的其他问题。

因为android 和ios 手机的不同,导航栏的显示也不太一样,而这篇文章会尽量的配置属性,让两端的导航栏样式、页面跳转的动画保持一致,同时还会介绍底部导航栏添加角标的方法。

这里使用的是3.9.1版本,网上好多文章是2.x版本的,用法基本大同小异。

android 导航栏标题居中适配

默认情况下,ios的标题居中显示,而android的则不!!!


Android开发之React Navigation 导航栏样式调整+底部角标消息提示

解决:createstacknavigatordefaultnavigationoptions属性里配置textalignflex

const appstacknavigator = createstacknavigator({
 homescreen: {screen: homescreen},
 rainscreen: {screen: rainscreen}
},{
 defaultnavigationoptions:{
  ...
  headertitlestyle: { 
   ...
   textalign: "center", //用于android 机型标题居中显示
   flex:1
  }
 }
})

注:android机型标题默认不居中,textalignflex的属性配置用于android机型标题居中显示。

在这种情况下,如果配置了headerleft或者headerright 属性,会出现标题偏移的现象。


Android开发之React Navigation 导航栏样式调整+底部角标消息提示

直接在defaultnavigationoptions里配置空view的headerleftheaderright

defaultnavigationoptions:{
  ...
  headertitlestyle: {
   ...
   textalign: "center", //用于android 机型标题居中显示
   flex:1,
  },
  headerright: <view/>,
  headerleft: <view/>
 }

这时候标题居中,同时可以在各自的页面里面去重写headerleft的样式。

android 导航栏去除阴影样式

android的导航栏还有阴影的样式,添加elevation 设置阴影的偏移量

defaultnavigationoptions:{
 headerstyle:{
  backgroundcolor:"#fff",
  elevation:0.5
 },
 ...
}

Android开发之React Navigation 导航栏样式调整+底部角标消息提示

至此的导航栏的效果跟ios基本保持一致。

android 页面跳转动画,自右向左打开

默认的android页面跳转是自下而上打开页面,而要与ios的保持一致的自右向左,配置transitionconfig属性。

const appstacknavigator = createstacknavigator({
 homescreen: {screen: homescreen},
 ...
},{
 defaultnavigationoptions:{
  ...
 },
 transitionconfig: () => ({
  screeninterpolator: (sceneprops) => {
   return stackviewstyleinterpolator.forhorizontal(sceneprops)
  },
 }),
})

底部导航添加消息角标

有时候我们会遇到这样的需求,在底部导航处添加消息的角标,提醒用户阅读的。


Android开发之React Navigation 导航栏样式调整+底部角标消息提示

tabbaricon的属性里直接添加图标显示的,这里的msg变量数值是全局的,只做演示使用,实际项目里可以根据接口返回数据,可以搭配mobx 一起使用。

const roottab = createbottomtabnavigator({
 ...
 info: {
  screen: infostack,
  navigationoptions: {
   tabbarlabel: "消息",
   tabbaricon: ({focused, tintcolor}) => {
    let icon = focused ?
     require('../resources/img/mine_icon_message_selected.png') :
     require('../resources/img/mine_icon_message_default.png');
    return <view>
     {
      msg > 0 ?
       <view style={{
        width:12,
        height:12,
        justifycontent:"center",
        position: 'absolute',
        zindex: 9,
        backgroundcolor: "#fb3768",
        borderradius:6,
        right:0,
        top:-2,
       }}>
        <text style={[{fontsize:10, color:"#fff", textalign:"center",}]}>{msg}</text>
       </view> : null
     }
     <image source={icon} style={{width: 34, height: 26}}/>
    </view>
   }
  }
 }
},{
 ...
 defaultnavigationoptions: ({navigation, screenprops}) => ({
  tabbaronpress: (obj) => {
   //点击的时候清除消息
   const {routename} = obj.navigation.state;
   if (routename === "info") {
    msg = 0
   }
   obj.navigation.navigate(obj.navigation.state.key)
  }
 })
})

以上几点是在react-navigation的使用过程中遇到的问题以及解决方法,相关代码已经传到了github上https://github.com/taixiang/reactnativedemo,仅供参考,如果有更好的方式 欢迎一起学习研究。

总结

以上所述是小编给大家介绍的react navigation 导航栏样式调整+底部角标消息提示 ,希望对大家有所帮助