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も通さなくていいです。