react-native 实现带icon的底部导航栏

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