react-native-router-flux の tabbarのiconに画像を使うには?

Question

react-nativeで初めてアプリを作ろうとしています。

UIの作成部分で、react-native-router-fluxを使ってみてこちらのページを参考に作っています。
http://qiita.com/YutamaKotaro/items/ab52b6ba664d88a87bd9

import React from 'react';
import {
    StyleSheet,
} from 'react-native';
import {
    Scene,
    Router,
} from 'react-native-router-flux';
import {
    PageA,
    PageA2,
    PageA3,
    PageB,
    PageC,
} from './component';
import TabIcon from './TabIcon';

const styles = StyleSheet.create({
    tabBar: {
        flex: 1,
        backgroundColor: 'rgb(50, 207, 202)',
    },
});

const App = () => (
    <Router>
        <Scene key="root">
            <Scene
              key="tabbar" tabs
              tabBarStyle={styles.tabBar}
            >
                <Scene key="pageA" initial component={PageA} title="PageA" icon={TabIcon} />
                <Scene key="pageA2" component={PageA2} title="PageA2" icon={TabIcon} />
                <Scene key="pageA3" component={PageA3} title="PageA3" icon={TabIcon} />
            </Scene>
            <Scene key="pageB" title="PageB" component={PageB} />
            <Scene key="pageC" title="PageC" component={PageC} />
        </Scene>
    </Router>
);

export default App;

参考のコードでは
icon={TabIcon}の部分でテキストを表示しているのですが、
これを画像や画像フォントを使うようにすることはできるのでしょうか？
react-native-router-flux のドキュメントを理解できず・・・よろしくお願いいたします。

Answer 1

記事見てくださってありがとうございます！

できますよー！
タブの背景画像はお勧めできませんが、
アイコンの画像はQiitaの記事的には

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

const styles = StyleSheet.create({
    tabText: {
        color: 'white',
    },
    tabTextActive: {
        color: 'gray',
    },
});
import ICON from './images/icon.png';

const TabIcon = props => (
    <Image source={ICON}>
      <Text
        style={
          props.selected ?
          styles.tebTextActive :
          styles.tabText
        }
      >
          {props.title}
      </Text>
    </Image>
);

export default TabIcon;

のように書けます。
回答になっておりますでしょうか・・・？

Comments

[aratan]

おお！ご本人から解答頂けるなんて、ありがたいです。
<Image />が使えるんですね。一度やってみようと思います。

あと重ねて質問してしまってすみませんが、
この<Image>が使えるというのは何処かに記載されていたりするのでしょうか？

[YutamaKotaro]

いえいえ・・・！！お役に立てて嬉しいかぎりです！

どこに使えるなどは書いていないです。
ImageもTextもコンポーネント内であれば自由に使えます（React Nativeのルールには従いますが）！
TabIconはコンポーネントなので画像を含んだコンポーネントに変えてやるといった感じになります。

なのでコンポーネントの仕様的にコンポーネントが許されるならばImageでもViewでも大丈夫です。
反面、コンポーネントが許されないものであればImageもTextも使うことができません。

あと、ドキュメントが未整備のまま放置され気味なので、rnrfのドキュメントに書いてある仕様が今ひとつだったり書かれていないものもあったりします・・・。

[aratan]

わかりました。コンポーネントを意識してみます。
とても助かりました。ありがとうごうざいます。

rnrfのドキュメント難しいですよね。
日本語の解説があると助かるんですが。
もう少し色々やってみようと思います。

[YutamaKotaro]

ドキュメントは難しいですね…。日本語で書かれててもちょっとわかんない部分が結構あると思います…。

そうですねー。もう少し色々なパターンの実装例がみれると助かるんですすけどね…（英語でも）。

はい！是非是非よろしくお願いします！
またわからなければ、新規にテラテイルに投稿して頂けると誰かが駆けつけるかもしれません！