【React Native・Vue Native】TabNavigatorのオプションまとめ - inokawablog

    【React Native・Vue Native】TabNavigatorのオプションまとめ

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

     

    まずは設置方法

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

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