詳解React Native頂|底部導航使用小技巧

2019-11-19 15:27:11

字體：大中小

來源：轉載

供稿：網友

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