React Native中頂|底部導航使用小技巧有哪些

這篇文章給大家分享的是有關React Native中頂|底部導航使用小技巧有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

感謝各位的閱讀！關于“React Native中頂|底部導航使用小技巧有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！