react native 基於react navigation 4.x 實現tabBar

1. 核心包安裝

yarn add react-navigation

2. 核心包的三個依賴項

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

3. 此時，一定要先運行一下項目，之后再安裝 react-navigation-tabs ，

yarn add react-navigation-tabs

如果你不運行項目，一口氣將 react-navigation-tabs也安裝后，再運行，就會報”gridle 6.0 不兼容錯誤，同時app安裝失敗“

4. 所需要的包已經安裝好了，那就上代碼

import React from 'react';
import { Text, View ,Image} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import Ionicons from 'react-native-vector-icons';

// 下面是 4個組件
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class Xinjia extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>新加坡</Text>
      </View>
    );
  }
}

class Malai extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>馬來西亞</Text>
      </View>
    );
  }
}
               
const TabNavigator = createBottomTabNavigator(
  {
    Home:{
      screen: HomeScreen,
      navigationOptions:({navigation})=>({       
          tabBarLabel:"中國",
          tabBarIcon:({focused,horizontal,tintColor})=>{
            let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
              return <Image style={{height:40, width:40}} source={image} />
          }     
      })
      
    },
    Setting:{
      screen: SettingsScreen,
      navigationOptions:{
        tabBarLabel:"日本",
        // 配置Icon圖標有兩種方式，（1）使用圖片，我覺得簡單（2）使用圖標庫
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }
    },
    Xin:{
      screen: Xinjia,
      navigationOptions:{
        tabBarLabel:"新加",
       //  tabBarVisible: false 隱藏標簽欄，就是隱藏tabBar
      }
    },
    Malai:{
      screen: Malai,
      navigationOptions:{
        tabBarLabel:"馬來"
      }
    }
  },
  {
    tabBarOptions: {
      showIcon: true,            // 是否顯示選項卡的圖標 
      activeTintColor: 'tomato', // 選中時狀態顏色
      inactiveTintColor: 'gray', // 未選中狀態顏色
      labelStyle: {              // 選項卡標簽的樣式對象
        fontSize: 12,            
      },
      style: {                   // 選項卡欄的樣式對象
        backgroundColor: 'blue', 
      },
    }
  }
);

export default createAppContainer(TabNavigator);

我解釋一下：
（1）上面的寫法和參考資料

https://reactnavigation.org/docs/zh-Hans/tab-based-navigation.html （這是react-navigation官網）

https://reactnavigation.org/docs/zh-Hans/bottom-tab-navigator.html （這個是react-naviagtion 的API部分）
（2）tabBar配置圖標時 ， 官網案例跟我的需求不一樣，查了一下react-navigation官網API，被我找到了，但是我就是沒理解那句話的意思。

navigationOptions:{
        tabBarLabel:"日本",
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require('./xiong.jpg') : require('./mao.jpg');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }

實現tabBar圖標有兩種方式

（1）使用，react-native-vector-icons 圖標庫  --- 暫時我沒有使用過
（2）使用，圖片 --- 我用的就是這種方法

我再解釋一下上面，focused 這個變量是 boolean 值，為 true處於”選中狀態“ ，為false處於”未選中狀態“

 

5. 為了證明，我實現了，貼一張圖，有用的話幫忙點個贊 ，謝謝