react-native 實現帶icon的底部導航欄

一：需要的依賴包

yarn add react-navigation react-navigation-tabs react-navigation-stack react-native-gesture-handler react-native-gesture-handler  react-native-reanimated react-native-vector-icons --save

如果有安裝失敗的依賴包，就一個一個的安裝。我在這邊遇到一個react-native-vector-icons總是安裝失敗的問題，解決方法是把yarn add react-native -g后，再次安裝就沒問題了。

二：寫頁面

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import React, { Component } from 'react';
import { Platform, View, Text } from 'react-native';
// console.disableYellowBox = true; // 關閉全部黃色警告
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

class Page1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home1!</Text>
      </View>
    );
  }
}
class Page2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home2!</Text>
      </View>
    );
  }
}
class Page3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home3!</Text>
      </View>
    );
  }
}
class Page4 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home4!</Text>
      </View>
    );
  }
}

export const BottomTab = createAppContainer(
  createBottomTabNavigator(
    {
      /*Page1路由*/
      Page1: {
        /*Page1頁面*/
        screen: Page1,
        /*屏幕導航選項,可以定制導航器顯示屏幕的方式（頭部標題，選項卡標簽等）*/
        navigationOptions: {
          /*導航標簽名*/
          tabBarLabel: '頁1',
          /*導航呈現的圖標*/
          tabBarIcon: ({ tintColor, focused }) => (
            /*第三方圖標庫（圖標名稱，圖標大小，圖標樣式*/
            <MaterialIcons name={'home'} size={26} style={{ color: tintColor }} />
          ),
          tabBarOnPress: (event) => {
            event.defaultHandler();//調用組建內默認的實現方法
            console.log('點擊了某個tabBatBtn' + event);
          },
        },
      },
      Page2: {
        screen: Page2,
        navigationOptions: {
          tabBarLabel: '頁2',
          tabBarIcon: ({ tintColor, focused }) => (
            <MaterialIcons
              name={'location-on'}
              size={26}
              style={{ color: tintColor }}
            />
          ),
          tabBarOnPress: (event) => {
            event.defaultHandler();//調用組建內默認的實現方法
            console.log('點擊了某個tabBatBtn' + event);
          },
        },
      },
      Page3: {
        screen: Page3,
        navigationOptions: {
          tabBarLabel: '頁3',
          tabBarOnPress: (event) => {
            event.defaultHandler();//調用組建內默認的實現方法
            console.log('點擊了某個tabBatBtn' + event);
          },
        },
      },
      Page4: {
        screen: Page4,
        navigationOptions: {
          tabBarLabel: '頁4',
          tabBarIcon: ({ tintColor, focused }) => (
            <MaterialIcons
              name={'perm-identity'}
              size={26}
              style={{ color: tintColor }}
            />
          ),
          tabBarOnPress: (event) => {
            event.defaultHandler();//調用組建內默認的實現方法
            console.log('點擊了某個tabBatBtn' + event);
          },
        },
      },
    },
    {
      tabBarOptions: {
        /*設置活動選項卡標簽的顏色*/
        activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE',
        // activeBackgroundColor: 'red',//活動選項卡的背景顏色。
        // inactiveTintColor: 'yellow',//非活動選項卡的標簽和圖標顏色。
        // inactiveBackgroundColor: 'pink',//非活動選項卡的背景顏色。

        // showLabel: true,//是否為標簽顯示標簽，默認為true。
        showIcon: false,//是否顯示選項卡的圖標，默認為true。顯示icon的話，labelStyle的的行高就要刪掉

        // style: {},//標簽欄的樣式對象。
        labelStyle: {//選項卡標簽的樣式對象。
          fontSize: 16,
          lineHeight: 46 // style和tabStyle都找不到垂直居中的屬性，只能設置行高。
        },
        tabStyle: {},//選項卡的樣式對象。

        // allowFontScaling: true,//標簽字體是否應縮放以符合“文本大小”輔助功能設置，默認為true。

        // //覆蓋forceInset道具 < SafeAreaView >。
        // // 默認為{bottom:'always', top:'never'}。可用鍵top | bottom | left | right隨值提供'always' | 'never'。
        safeAreaInset: {
          bottom: 'never',
          top: 'always'
        },
      },
    },
  ),
);

const AppRouter = createStackNavigator({
  Home: {
    screen: BottomTab,
    navigationOptions: {
      header: null, //可以通過將header設為null來禁用StackNavigator的Navigation
    },
  },
});

export const AppCreateNavigator = createAppContainer(
  createSwitchNavigator(
    {
      AppRouter: AppRouter,
    },
    {
      initialRouteName: 'AppRouter',
    },
  ),
);

export default class app extends React.Component {
  render() {
    return (
      <AppCreateNavigator />
    )
  }
}

注意點：1、設置icon時，labelStyle不要設置行高。沒有圖標並且想要文字垂直居中的話，要設置labelStyle的行高。

具體的配置見這里:React Navigation