オプションをいちいち調べるのが面倒だったのでまとめておきます。
まずは設置方法
一番シンプルな形、下部にタブを設置
const tabNav = TabNavigator(
{
Home: HomeScreen,
Details: DetailsScreen
},
{
tabBarPosition: "bottom",
tabBarComponent: TabBarBottom
}
);
TabNavigatorのオプション
navigationOptions
ナビゲーションに関するオプション
tabBarVisible:タブバーを表示または非表示。デフォルトはtrue。
true or false
tabBarIcon
指定できるもの{ focused: boolean, horizontal: boolean, tintColor: string }。horizontalがtrueの場合アイコンは、デバイスの向きが変わるたびに再レンダリングされる。
tabBarLabel
タブバーに表示されるタブのタイトル文字列。指定できるもの{ focused: boolean, tintColor: string }
未定義の場合、titleが使用されます。
tabBarButtonComponent
デフォルトは、TouchableWithoutFeedback他のタッチ可能オブジェクトと同じように動作するラッパーです。代わりにtabBarButtonComponent: TouchableOpacityを使用します。
tabBarAccessibilityLabel
タブボタンのアクセシビリティラベル。これは、ユーザーがタブをタップしたときにスクリーンリーダーによって読み取られます。タブのラベルがない場合は、これを設定することをお勧めします。
tabBarTestID
テストでこのタブボタンを見つけるためのID。
tabBarOnPress
プレスイベントを処理するコールバック。引数は以下を含むオブジェクトです:
- navigation:画面のナビゲーション支柱
- defaultHandler:タブを押すためのデフォルトのハンドラー
次のシーン(タップされたシーン)への遷移が始まる前にカスタムロジックを追加するのに便利です。
defaultHandlerナビゲーションが発生しないように、呼び出さずにこのコールバックを定義します。
tabBarOnPress: ({previousScene, scene, jumpToIndex}) => {
//モーダルを開く処理
},
modalと組み合わせて、こんな感じにすればinstagramの投稿ボタンみたいなこともできる。
tabBarOnLongPress
長押しイベントを処理するコールバック。引数は以下を含むオブジェクト:
- navigation:画面のナビゲーション支柱
- defaultHandler:タブを押すためのデフォルトのハンドラー
BottomTabNavigatorConfig
タブに関するオプション
tabBarComponent:タブバーとして使用するコンポーネントをオーバーライド
TabBarTop,TabBarBottom
tabBarPosition: タブの位置,
top or bottom
animationEnabled: タブをクリックした時にアニメーションしながら滑らかに遷移します.
true or false
lazy: タブがアクティブになる前に、レンダリングされないようにする。メモリ使用量をさらに最適化する(遅延読み込み)
true or false
swipeEnabled:スワイプできるかどうか
true or false
tabBarOptions
tabBarOptionsの設定はここにまとまっている
- activeTintColor - アクティブなタブのラベルとアイコンの色。
- inactiveTintColor - アクティブではないタブのラベルとアイコンの色。
- showIcon - アイコンを表示するかどうか
- showLabel - ラベルを表示するかどうか
- upperCaseLabel - ラベルを大文字にするかどうか、デフォルトはtrue
- pressColor - リップルエフェクトの色 (Android >= 5.0 only).
- pressOpacity - クリックした時の透明度 (iOS and Android < 5.0 only).
- scrollEnabled - スクロール可能にするかどうか.
- tabStyle - タブのスタイル
- indicatorStyle - タブの下部の線の設定
- labelStyle - ラベルのスタイル
- iconStyle - アイコンのスタイル
- style - タブバー全体のスタイル
- allowFontScaling - テキストサイズのアクセシビリティ設定を尊重するためにラベルフォントを拡大縮小するかどうか、デフォルトはtrue
- adaptive - タブのアイコンとラベルの配置は、画面サイズに基づいて変更。iOS 11のデフォルトはtrue。falseの場合、タブのアイコンとラベルは常に垂直に整列します。true、タブアイコンとラベルはタブレット上で水平に整列します。
- safeAreaInset - セーフエリアの設定です。詳しくはここで説明されています。デフォルトは{ bottom: 'always', top: 'never' }です。使用可能なキーはtop | bottom | left | right。
- keyboardHidesTabBar - デフォルトはfalse。trueキーボードが開いたときにタブバーを非表示にする場合。
まとめ
Vue NativeとReact Nativeのナビゲーションは気難しい。。。