詳解React Native頂|底部導(dǎo)航使用小技巧

2019-11-19 15:27:11

字體：大中小

供稿：網(wǎng)友

導(dǎo)航一直是App開發(fā)中比較重要的一個組件，ReactNative提供了兩種導(dǎo)航組件供我們使用，分別是：NavigatorIOS和Navigator，但是前者只能用于iOS平臺，后者在ReactNative0.44版本以后已經(jīng)被移除了。

好在有人提供了更好的導(dǎo)航組件，就是我們今天要講的react-navigation，并且ReactNative官方更推薦我們使用此組件。

本篇文章只講解基礎(chǔ)用法，如果你想了解更多，請戳這里->戳我。

簡介

react-navigation主要包括導(dǎo)航，底部tab，頂部tab，側(cè)滑等，分別為：

導(dǎo)航 -> StackNavigator
底部或者頂部tab -> TabNavigator
側(cè)滑 -> DrawerNavigator

我們今天主要講TabNavigator。

效果展示

實現(xiàn)代碼

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下面會顯示一條線，高度設(shè)為 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上的默認設(shè)置），（這是Android上的默認設(shè)置）TabBarBottomTabBarTop
tabBarPosition- 標簽欄的位置可以是或'top''bottom'
swipeEnabled - 是否允許在標簽之間進行滑動
animationEnabled - 是否在更改標簽時動畫
lazy - 是否根據(jù)需要懶惰呈現(xiàn)標簽，而不是提前制作
tabBarOptions - 配置標簽欄，如下所示。
幾個選項被傳遞到底層路由器來修改導(dǎo)航邏輯：
initialRouteName - 首次加載時初始標簽路由的routeName
order - 定義選項卡順序的routeNames數(shù)組
paths - 將routeName映射到路徑配置，該配置將覆蓋routeConfigs中設(shè)置的路徑。
backBehavior - 后退按鈕是否會使Tab鍵切換到初始選項卡？如果是，否則設(shè)置。默認為行為。initialRoutenoneinitialRoute

tabBarOptions for （iOS上的默認標簽欄）TabBarBottom