createMaterialBottomTabNavigatorの使い方

公式では使い方が全くもって分からなかったのサンプルのコードを自分で作りました。

Navigation.js

import React, { Component } from 'react';
import { Platform } from 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation'; 

import Hoge1 from './hoge1';
import Hoge2 from './hoge2';
import Hoge3 from './hoge3';

 const TabNavibar = createMaterialBottomTabNavigator(
  {
    example1: {
      screen: Hoge1,
      navigationOptions: {
        tabBarLabel: 'example1',
        tabBarColor: '#842655',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-home' : 'ios-home') : 'md-home' } style={{ color: tintColor }} />
        )
      }
    },
    example2: {
      screen: Hoge2,
      navigationOptions: {
        tabBarLabel: 'example2',
        tabBarColor: '#1e1e1d',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-contact' : 'ios-contact') : 'md-contact' } style={{ color: tintColor }} />
        )
      }
    },
    example3: {
      screen: Hoge3,
      navigationOptions: {
        tabBarLabel: 'example3',
        tabBarColor: '#ff3838',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={25} name={ Platform.OS === 'ios' ? (focused ? 'ios-settings' : 'ios-settings') : 'md-settings' } style={{ color: tintColor }} />
        )
      }
    }
  },
  {
    shifting: true,
    activeTintColor: 'white',
    inactiveTintColor: '#ddd',
  }
);

export default createAppContainer(TabNavibar);

MainNavigation.js

import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
import MyTabs from './TabNavigator';

class MainNavigator extends React.Component {
  constructor(props) {
    super(props);
  }

  render () {
    return(
      <NavigationContainer>
        <StatusBar />
        <MyTabs /> 
      </NavigationContainer>
    );
  }
}

export default MainNavigator;

今回はMainNavigationの中にさらにNavigationを作る方向で書きました。
Hoge: コンポーネントの名前です。
example1, example2, example3: ルーティングの名前です。分かりやすいようにtabBarLabelと合わせた方がいい気がします。
screen: 遷移したいコンポーネントの名前
tabBarLabel: アイコンの下に表示するタイトル

アイコンに関しては
https://oblador.github.io/react-native-vector-icons/
に載っています。

各コンポーネントに通すものはありません。navigationも通さなくていいです。