auの日記

プログラミング初心者の日記。(auはハンドルネームです)

【React-Native】createMaterialTopTabNavigatorを使ってスワイプの画面遷移を実装する

auです。

React-Nativeを使って、iOSとAndroidOSの両方で使えるアプリを作っています。

簡単に見えて結構難しい・・・。

僕は、画面をスワイプして遷移する動作を実装しようとしました。

その中で制約は

  1. タブは下に表示されている
  2. 左右スワイプで1つだけページを遷移
  3. タブをクリックして強制的にそのページへ遷移

この3項目です。



タブを下に表示させるには、createBottomTabNavigatorを使えばいいんじゃね?と思ってやってみたのですが、2番目のスワイプがデフォルトにないじゃん・・・。ということに気づきました。



createMaterialTopTabNavigatorを使う

そこでやれそうだったのが、「createMaterialTopTabNavigator」をうまく使うことです。

公式ドキュメントを見てみると、オプションにいい感じのものが・・・。

f:id:program-shoshinsya:20191023172755p:plain

reactnavigation.org

完璧にこれだと思い、オプションを設定してみるとちゃんと下に表示されました。

実際に設定したオプションはこんな感じです。

{
        tabBarPosition: 'bottom',
        tabBarOptions: {
            showIcon: true,
            upperCaseLabel: false,
            activeTintColor: '#168bc9',
            inactiveTintColor: 'black',
            style: {
                backgroundColor: '#cbdd45',
                color: '#13455',
            }
        },
}

まだ完成してないので画像はないですが、落ち着いたら追記で貼ろうと思います。

ちなみに、今はWebから取得したリンクを使ってブラウザを開こうと思って積んでいます。