当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解React Native顶|底部导航使用小技巧

详解React Native顶|底部导航使用小技巧

2017年12月12日  | 移动技术网IT编程  | 我要评论

导航一直是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；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网