React-NavigationのTabにカスタムアイコンを設定する

注意点

• React-Navigation V4からTabNavigationは別途読み込みが必要になったようです。
  • 個別にnpm install, importが必要です。

完成

独自に作ったアイコン（透過PNG）をアイコンとして利用します。

アイコンに意味はありません。透過を確認するために頭部？に穴を開けてます。

準備

透過PNGを作って、asseetsフォルダに保存します。
正方形のキャンバスに書いたほうがいいです。とりあえず300 x 300pxで作りましたが、最後は20px前後になりますので大きく作ってもあまり意味はないですね。

ここでは、assets/test2.pngとして保存しました。

実装

右Tabと左Tabを用意して、右はFontAwesomeを利用、左をカスタムアイコンとしています（念の為共存確認）。
Tab1, Tab2のコードは、タダTab1, Tab2と表示してるだけのもの。

元のPNGが何色ベースでもtintColorを設定することで標準？の色に変換されて便利。

App.js

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';

import Tab1 from './screens/Tab1';
import Tab2 from './screens/Tab2';

const Tab = createBottomTabNavigator(
    {
        Tab1: {
            screen: Tab1,
            navigationOptions: {
                //普通のアイコン
                tabBarIcon: ({ tintColor }) => <Icon size={24} name="home" color={tintColor} />,
                title: 'ホーム'
            }
        },
        Tab2: {
            screen: Tab2,
            navigationOptions: {
                //カスタムアイコン
                tabBarIcon: ({ tintColor }) => <Image source={require('./assets/test2.png')} style={{ width: 24, height: 24, tintColor: tintColor }} />,
                title: 'カスタム'
            }
        },
    }
);

export default class App extends React.Component {
    render() {

        const Layout = createAppContainer(Tab);

        return (
            <View style={{ flex: 1 }}>
                <Layout />
            </View>
        );
    }
}

いちおうTab1。

Tab1

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

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

そしてTab2。screensというフォルダを作ってその下に入れてます。

Tab2

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

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