質問編集履歴

1 Monaca タグを追加

KentaKonno

KentaKonno score 11

2019/01/25 18:04  投稿

React + OnsenUI のタブバーでカスタムアイコンを使う方法
# 概要
- react-onsenui の[タブバー](https://ja.onsen.io/v2/api/react/Tabbar.html)でカスタムアイコン([react-fontawesome](https://github.com/FortAwesome/react-fontawesome))を使いたい
- [バンドルサイズを削減するため](https://ja.onsen.io/v2/guide/appsize.html#apurisaizunosakugen)、アイコンパックを除去した `onsenui-core.min.js` をインポート
# 公式ドキュメントのコード
```
<Page>
<Tabbar
onPreChange={({index}) => this.setState(index)}
onPostChange={() => console.log('postChange')}
onReactive={() => console.log('postChange')}
position='bottom'
index={this.state.index}
renderTabs={(activeIndex, tabbar) => [
{
content: <TabPage title="Home" active={activeIndex === 0} tabbar={tabbar} />,
tab: <Tab label="Home" icon="md-home" />
},
{
content: <TabPage title="Settings" active={activeIndex === 1} tabbar={tabbar} />,
tab: <Tab label="Settings" icon="md-settings" />
}]
}
/>
</Page>
```
上の `tab: <Tab label="Home" icon="md-home" />` の行の `icon=` に react-fontawesome のアイコン `<FontAwesomeIcon icon='faHome' />` を渡したいのですが、方法がわかりません。
ご存知の方はお教え願えませんでしょうか?
## 環境
node 10.15.0
npm 6.6.0
react 16.7.0
onsenui 2.10.6
react-onsenui 1.11.2
"@fortawesome/fontawesome-svg-core": "^1.2.12",
"@fortawesome/free-solid-svg-icons": "^5.6.3",
"@fortawesome/react-fontawesome": "^0.1.4",
  • Onsen UI

    384 questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

  • React.js

    1433 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    390 questions

  • Monaca

    1224 questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る