注意 react-navigation v3で動作確認しています react-navigation v4がリリースされ、createBottomTabNavigator等が分離されています(未対応)。 概要 まともなアプリを作るためにはNavigation機能の利用は避けて通れません。 ライブラリとしてはreact-navigationとreact-native-router-flux(rnrf)というのが有名みたいですが、Reac自体に不慣れなので情報が多いreact-navigationを利用してみます。 この基礎編をベースにした応用編んも書きました。よろしければどうぞ。 React-Navigatorを利用してみる(基礎編)→この記事 RN応用編1:Drawer Navigatorをハンバーガーメニューで表示させる RN応用編2:TabやDrawerメニューにアイコンを設定する RN
既存編、応用編1からの続きです。 シリーズ React-Navigatorを利用してみる(基礎編) RN応用編1:Drawer Navigatorをハンバーガーメニューで表示させる RN応用編2:TabやDrawerメニューにアイコンを設定する→この記事 RN応用編3:Reduxで値の取り回し 概要 応用編1ではハンバーガーメニューで見た目をいじったので、ついでにTabやDrawerメニューにアイコンを追加してみます。 Tabメニューにアイコンを追加 アイコンもいくつかの場所で追加できますが、ここではcreateBottomTabNavigator()にnavigationOptionsを定義することで追加してみます。 Tabにアイコンを追加します。react-native-vector-iconsを利用するので、installやimportがまだであれば実行してください。 +import
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 HomeScreen from 'HomeScreen'; import ProfileScreen from 'ProfileScreen'; import SettingsScreen from 'SettingsScreen'; export default createMaterialBottomTabNavigator
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く