宜宾网站建设公司

ReactNative中顶|底部导航使用小技巧有哪些

这篇文章给大家分享的是有关React Native中顶|底部导航使用小技巧有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

我们提供的服务有：网站设计制作、成都网站设计、微信公众号开发、网站优化、网站认证、耀州ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的耀州网站制作公司

导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别是：NavigatorIOS和Navigator，但是前者只能用于iOS平台，后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件，就是我们今天要讲的react-navigation，并且ReactNative官方更推荐我们使用此组件。

 简介

react-navigation主要包括导航，底部tab，顶部tab，侧滑等，分别为：

  • 导航 -> StackNavigator

  • 底部或者顶部tab -> TabNavigator

  • 侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

效果展示

React Native中顶|底部导航使用小技巧有哪些

 实现代码

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 }) => (
      
    )
  };
  render() {
    return (
      
        ！这是热点
      
    );
  }
}

class Circle extends React.Component {
  static navigationOptions = {
    tabBarLabel: '圈子',
    tabBarIcon: ({ focused, tintColor }) => (
      
    )
  };
  render() {
    return (
      
        ！这是圈子
      
    );
  }
}

class Tools extends React.Component {
  static navigationOptions = {
    tabBarLabel: '工具',
    tabBarIcon: ({ focused, tintColor }) => (
      
    )
  };
  render() {
    return (
      
        ！这是工具
      
    );
  }
}

class Mypage extends React.Component {
  static navigationOptions = {
    tabBarLabel: '我的',
    tabBarIcon: ({ focused, tintColor }) => (
      
    )
  };
  render() {
    return (
      
        ！这是我的
      
    );
  }
}

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；

感谢各位的阅读！关于“React Native中顶|底部导航使用小技巧有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


网站标题：ReactNative中顶|底部导航使用小技巧有哪些
标题路径：http://ybzwz.com/article/gcpooi.html

其他资讯