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

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

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

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

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

android 导航栏标题居中适配

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

解决:createStackNavigatordefaultNavigationOptions属性里配置textAlignflex

const AppStackNavigator = createStackNavigator({
 HomeScreen: {screen: HomeScreen},
 RainScreen: {screen: RainScreen}
},{
 defaultNavigationOptions:{
  ...
  headerTitleStyle: {
   ...
   textAlign: "center", //用于android 机型标题居中显示
   flex:1
  }
 }
})

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

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

直接在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
 },
 ...
}

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

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

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

const AppStackNavigator = createStackNavigator({
 HomeScreen: {screen: HomeScreen},
 ...
},{
 defaultNavigationOptions:{
  ...
 },
 transitionConfig: () => ({
  screenInterpolator: (sceneProps) => {
   return StackViewStyleInterpolator.forHorizontal(sceneProps)
  },
 }),
})

底部导航添加消息角标

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

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 导航栏样式调整+底部角标消息提示 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • React Native中导航组件react-navigation跨tab路由处理详解

    前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别处理下路由,所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下: 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavig

  • react-native使用react-navigation进行页面跳转导航的示例

    首先要确认已经配置好react-native的环境. # 创建一个native应用,SimpleApp,然后进入项目目录 react-native init SimpleApp cd SimpleApp # 通过npm安装最新版本的react-navigation npm install --save react-navigation # 运行程序 react-native run-android 引入Stack Navigator 对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个

  • 官方推荐react-navigation的具体使用详解

    看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单.我就写个demo,试了一下. 一.主要构成 按使用形式主要分三部分: StackNavigator: 类似于普通的Navigator,屏幕上方导航栏 TabNavigator: 相当于ios里面的TabBarController,屏幕下方的标签栏 DrawerNavigator: 抽屉效果,侧边滑出 二.使用 1.新建项目 react-native init ComponentD

  • React Native react-navigation 导航使用详解

    一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.

  • react-navigation 如何判断用户是否登录跳转到登录页的方法

    本文介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法,分享给大家,也给自己留个笔记,具体如下: 新建一个index.js import React, {Component} from 'react'; import {AppRegistry, Text, View, Button,Image,StyleSheet,BackHandler,ToastAndroid} from 'react-native'; import { StackNavigator,TabNav

  • React Native学习教程之自定义NavigationBar详解

    前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是NavigationBar的问题,NavigationIOS有NavigationBar,Navigation却需要自定义一个,最后,我想了想,还是自定义一个view,岂不更好,现在新公司不用RN,我正好有点时间,就把自定义的NavigationBar分享给大家.好了少废话,上代码: 示例代码 // NavigationBar 导航条的自定义封装 // create by

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

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是react-navigation,也是rn社区主推的一个导航库. 网上关于react-navigation的基本使用也是一抓一大把,这里对于它的使用不做过多介绍,主要记录使用过程中的其他问题. 因为android 和iOS 手机的不同,导航栏的显示也不太一样,而这篇文章会尽量的配置属性,让两端的导航栏样

  • Android开发之ListView的head消失页面导航栏的渐变出现和隐藏

    1.Fragment页面xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android开发之SeekBar基本使用及各种美观样式示例

    本文实例讲述了Android开发之SeekBar基本使用及各种美观样式.分享给大家供大家参考,具体如下: 改变控件透明度只需通过 .setAlpha()方法实现 有多种改变思路: 1.改变图片透明度 2.改变背景透明度地点 setBackground() 等等 这里举个例子: 思路拓展:只要将透明度的动态修改跟手势向结合 就能实现toolbar等洞见在拖动是隐藏 以下是更SeekBar相结合的实现代码 seekbar的position属性设置在 0~255 之间 正好与0~255 的透明度相对应

  • Android开发之TabActivity用法实例详解

    本文实例讲述了Android开发之TabActivity用法.分享给大家供大家参考,具体如下: 一.简介 TabActivity继承自Activity,目的是让同一界面容纳更多的内容.TabActivity实现标签页的功能,通过导航栏对各个页面进行管理. 二.XML布局文件 注意: 1.TabActivity的布局文件要求以TabHost作为XML布局文件的根. 2.通常我们采用线性布局,所以<TabHost> 的子元素是 <LinearLayout>. 3.<TabWidg

  • Android开发之menu菜单

    Android系统里面有四种类型的菜单:options menu(选项菜单),context menu(上下文菜单),sub menu(子菜单),Popup menu(弹出菜单). 首先说 选项菜单(OptionsMenu) 一.方法介绍: public booleanonCreateOptionsMenu(Menu menu):使用此方法调用OptionsMenu . public booleanonOptionsItemSelected(MenuItem item):选中菜单项后发生的动作.

  • Android开发之sqlite3命令行简单使用方法

    本文实例讲述了Android开发之sqlite3命令行简单使用方法.分享给大家供大家参考,具体如下: 首先需要定位到database所在的目录里面,然后使用命令 sqlite3 databasename(数据库的名字)进入 常用命令: 1. .table     列取该数据库下面的数据表名 2. .schema 或者 .schema + 表名       获取整个或者是单个表的表结构 3. .database 显示该数据库所在的位置 4. .dump 显示数据库的所有信息(包括表结构,表数据)

  • Android开发之ProgressBar字体随着进度条的加载而滚动

    在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图 我这里用的是LICEcap软件录制的gif图,效果有点掉帧,哪位仁兄有比较好的录制gif的软件烦请相告,小弟在此先行谢过. 首先看下xml代码,只有两个系统控件,一个TextView和一个ProgressBar,Button只是为了方便触发进度条的效果,实际项目中可以根据需求来做.首先看下xml中的代码: <?xml version

  • Android开发之DialogFragment用法实例总结

    本文实例讲述了Android开发之DialogFragment用法.分享给大家供大家参考,具体如下: 背景 Android 官方推荐使用 DialogFragment 来代替 Dialog ,可以让它具有更高的可复用性(降低耦合)和更好的便利性(很好的处理屏幕翻转的情况). 而创建 DialogFragment 有两种方式: 1. 覆写其 onCreateDialog 方法 - ① 2. 覆写其 onCreateView 方法 - ② 虽然这两种方式都能实现相同的效果,但是它们各有自己适合的应用

  • Android开发之TabHost选项卡及相关疑难解决方法

    本文实例分析了Android开发之TabHost选项卡及相关疑难解决方法.分享给大家供大家参考,具体如下: 前言: 虽然现在谷歌已经不推荐使用TabHost,但是初学者还是很有必要接触下这一成金的经典的,本文将介绍纤细介绍这一空间的使用,以及大家可能遇到的问题.注:文末给出完整实现代码 三个问题: 1. 无法显示TabHost 2. 添加图片 + 文字 无法同时 3. 说在最后:点击事件 4. 底部导航无法实现 现在 从问题出发: 问题一:无法显示 TabHost 很多人调用TabHost的方法

随机推荐