オプションをいちいち調べるのが面倒だったのでまとめておきます。

まずは設置方法

一番シンプルな形、下部にタブを設置

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のナビゲーションは気難しい。。。