详解React Native顶|底部导航使用小技巧
程序员文章站
2022-04-29 08:11:44
导航一直是app开发中比较重要的一个组件,reactnative提供了两种导航组件供我们使用,分别是:navigatorios和navigator,但是前者只能用于ios平...
导航一直是app开发中比较重要的一个组件,reactnative提供了两种导航组件供我们使用,分别是:navigatorios和navigator,但是前者只能用于ios平台,后者在reactnative0.44版本以后已经被移除了。
好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且reactnative官方更推荐我们使用此组件。
本篇文章只讲解基础用法,如果你想了解更多,请戳这里->。
简介
react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:
- 导航 -> stacknavigator
- 底部或者顶部tab -> tabnavigator
- 侧滑 -> drawernavigator
我们今天主要讲tabnavigator。
效果展示
实现代码
import react, { component } from 'react'; import { appregistry, stylesheet, button, text, view, image, statusbar } from 'react-native'; import { stacknavigator, tabbarbottom, tabnavigator } from "react-navigation"; class home extends react.component { static navigationoptions = { tabbarlabel: '热点', tabbaricon: ({ focused, tintcolor }) => ( <image source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')} style={{ width: 26, height: 26, tintcolor: tintcolor }} /> ) }; render() { return ( <view style={styles.container}> <text>!这是热点</text> </view> ); } } class circle extends react.component { static navigationoptions = { tabbarlabel: '圈子', tabbaricon: ({ focused, tintcolor }) => ( <image source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')} style={{ width: 26, height: 26, tintcolor: tintcolor }} /> ) }; render() { return ( <view style={styles.container}> <text>!这是圈子</text> </view> ); } } class tools extends react.component { static navigationoptions = { tabbarlabel: '工具', tabbaricon: ({ focused, tintcolor }) => ( <image source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')} style={{ width: 26, height: 26, tintcolor: tintcolor }} /> ) }; render() { return ( <view style={styles.container}> <text>!这是工具</text> </view> ); } } class mypage extends react.component { static navigationoptions = { tabbarlabel: '我的', tabbaricon: ({ focused, tintcolor }) => ( <image source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')} style={{ width: 26, height: 26, tintcolor: tintcolor }} /> ) }; render() { return ( <view style={styles.container}> <text>!这是我的</text> </view> ); } } const styles = stylesheet.create({ container: { flex: 1, justifycontent: 'center', alignitems: 'center', backgroundcolor: '#fff', } }); const myapp = tabnavigator( { home: { screen: home, }, circle: { screen: circle, }, tools: { screen: tools, }, mypage: { screen: mypage, }, }, { tabbaroptions: { activetintcolor: '#4bc1d2', inactivetintcolor: '#000', showicon: true, showlabel: true, uppercaselabel: false, presscolor: '#823453', pressopacity: 0.8, style: { backgroundcolor: '#fff', paddingbottom: 0, bordertopwidth: 0.5, bordertopcolor: '#ccc', }, labelstyle: { fontsize: 12, margin: 1 }, indicatorstyle: { height: 0 }, //android 中tabbar下面会显示一条线,高度设为 0 后就不显示线了 }, tabbarposition: 'bottom', swipeenabled: false, animationenabled: false, lazy: true, backbehavior: 'none', }); module.exports = myapp;
配置说明
navigationoptions
当然,通过navigationoptions来配置我们的tabbaritem:
- title - 标题
- tabbarvisible - 是否可见
- tabbaricon - 配置图片,当然,完全可以不使用图片
- tabbarlabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题
tabnavigatorconfig
- tabbarcomponent- 用作标签栏的组件,例如 (这是ios上的默认设置), (这是android上的默认设置)tabbarbottomtabbartop
- tabbarposition- 标签栏的位置可以是或'top''bottom'
- swipeenabled - 是否允许在标签之间进行滑动
- animationenabled - 是否在更改标签时动画
- lazy - 是否根据需要懒惰呈现标签,而不是提前制作
- tabbaroptions - 配置标签栏,如下所示。
- 几个选项被传递到底层路由器来修改导航逻辑:
- initialroutename - 首次加载时初始标签路由的routename
- order - 定义选项卡顺序的routenames数组
- paths - 将routename映射到路径配置,该配置将覆盖routeconfigs中设置的路径。
- backbehavior - 后退按钮是否会使tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialroutenoneinitialroute
tabbaroptions for (ios上的默认标签栏)tabbarbottom
- activetintcolor - 活动标签的标签和图标颜色
- activebackgroundcolor - 活动选项卡的背景颜色
- inactivetintcolor - 非活动标签的标签和图标颜色
- inactivebackgroundcolor - 非活动标签的背景颜色
- showlabel - 是否显示标签的标签,默认为true
- style - 标签栏的样式对象
- labelstyle - 标签标签的样式对象
- tabstyle - 标签的样式对象
tabbaroptions for (android上的默认标签栏)tabbartop
- activetintcolor - 活动标签的标签和图标颜色
- inactivetintcolor - 非活动标签的标签和图标颜色
- showicon - 是否显示标签的图标,默认值为false
- showlabel - 是否显示标签的标签,默认为true
- uppercaselabel - 是否使标签大写,默认为true
- presscolor - 材质波纹颜色(android> = 5.0)
- pressopacity - 按压标签的不透明度(ios和android <5.0 only)
- scrollenabled - 是否启用可滚动选项卡
- tabstyle - 标签的样式对象
- indicatorstyle - 标签指示器的样式对象(选项卡底部的行)
- labelstyle - 标签标签的样式对象
- iconstyle - 标签图标的样式对象
- style - 标签栏的样式对象
小技巧
1.去掉安卓下的下划线,设置:tabbaroptions => indicatorstyle:{ height: 0 };
2.底部导航在导航最上方添加一条分割线,设置:tabbaroptions => style => bordertopwidth: 0.5, bordertopcolor: '#ccc';
3.导航安卓图标和文字间隙比较大,手动调整小设置:tabbaroptions => labelstyle => margin: 0;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。