react-native底部導航欄實現--react-navigation-tabs填坑記錄

最近剛開始學習react-native，在做一些小項目，實現底部tab欄時卡了半天，終於解決了！

開始去網上找實現底部tab欄的方法時，很多文章都寫了用react-native-tab-navigator這個npm包實現。但是react-native-tab-navigator最后更新時間已經是2017年了，已經有兩年多沒有維護和更新了！因此隨着react版本的更新，react-native-tab-navigator很多實現方法已經和新版本的react發生沖突了，如果項目引入了這個包，運行時就會發現報錯。例如:Warning: componentWillReceiveProps has been renamed, and is not recommended for use。原因是componentWillReceiveProps生命周期鈎子在react中已經改為了UNSAFE_componentWillReceiveProps。諸如此類，因此不要再使用react-native-tab-navigator了(好多文章居然2019年了還在用這個包)。

推薦使用react-navigation-tabs包,以下是相關步驟。

1.引入相關包

運行下面兩個指令之一

npm install react-native-reanimated react-native-gesture-handler react-native-screensreact-navigation react-navigation-tabs --save
yarn add react-native-reanimated react-native-gesture-handler react-native-screensreact-navigation react-navigation-tabs

引入react-native-reanimated，react-native-gesture-handler，react-native-screens，react-navigation，react-navigation-tabs5個包，因為我們的底部導航欄要配合路由使用，前三個包是和react-native路由相關的包，后兩個是和我們底部導航相關的包。

2.簡單底部導航

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// 路由  組件 HomeScreen
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
// 路由  組件 SettingsScreen
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
// 生成導航欄
const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppContainer = createAppContainer(TabNavigator);

class App extends React.Component {
  render(){
    return <AppContainer></AppContainer>
  }
};

export default App;

發現成功顯示了導航欄，但是因為沒有圖標，看上去有些奇怪，配置圖標繼續往下走

3.導航圖標相關配置

1. 引入react-native-vector-icons包
   運行指令yarn add react-native-vector-icons或者npm install react-native-vector-icons --save
2. 進行相關配置
   首先在項目android/app/build.gradle目錄中加入如下代碼：

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

然后將node_modules/react-native-vector-icons/Fonts文件夾下面的所有文件，復制到android/app/src/main/assets/fonts文件夾下（若沒有該文件夾則新建該文件夾）。

4.引入導航后最終demo代碼

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
// 路由  組件 HomeScreen
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
// 路由  組件 SettingsScreen
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
// 生成導航欄
const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home'
        } else if (routeName === 'Settings') {
          iconName = `gear`;
        }
        return <Icon name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#409EFF',  // 選中項的顏色
      inactiveTintColor: '#909399', // 未選中項的顏色
    },
  }
);

const AppContainer = createAppContainer(TabNavigator);

class App extends React.Component {
  render(){
    return <AppContainer></AppContainer>
  }
};

成功實現！