質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • React Native

    267questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,221

aratan

score 30

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 のドキュメントを理解できず・・・よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/21 16:47

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

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

    キャンセル

  • 2017/03/21 17:56

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

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

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

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

    キャンセル

  • 2017/03/21 19:35

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

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

    キャンセル

  • 2017/03/21 19:42

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • React Native

    267questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。