createBottomTabNavigatorでボトムタブを追加

React Navigationで画面遷移の実装とボトムタブの実装がシンプルに作れるー!ということで、今回はボトムタブの実装をやろうと思います。
タブで使う用のアイコンも一緒に追加すると良い感じです。

yarn add @react-navigation/bottom-tabs react-native-vector-icons

使える一覧はこんなところ。
https://oblador.github.io/react-native-vector-icons/

說明を見る感じIOSだとそのまま使えるみたいやけども、Androidの場合はGradleに追記が必要で、Recommendな方法だと

// 近いところに似たファイルがありますがこの./android/app/build.gradle を弄ります。
// 使いたいアイコン郡のttfを追記。ttfって書き忘れてハマった。
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialCommunityIcons.ttf', 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

こんな感じで。

ボトムタブの実装は最近ブログにアップしてた近くで済ますアプリに追加していくつもりで、ただ画面1枚だけだとちょっとさみしいので急ピッチで作業時間1時間ほどかけて2枚のアプリを追加しました。
追加したアプリはコードが汚すぎるのでアップはできませんが(笑)主題はタブやしいいかな。
使い方は公式サイトにも書いてあるとおりコンポーネントをTab.Navigatorで挟めばOK。ReactNavigation仲間?のStack.Navigatorとも同じ感じで使えますがPropsとかは違うので注意が必要。あとどうもバージョン5から使い勝手ちょっと変わってるみたいやけど大丈夫です。

だいぶ前にアップしてたReact Nativeのアプリでも過去のバージョンの同じライブラリを使ってたみたいやけど、もうまったく覚えてはいなくて確かに記述も違うからなかなか気づかなかったです。

const Tab = createBottomTabNavigator();

const BottomTab = () => (
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: "black",
      inactiveTintColor: "gray",
      activeBackgroundColor: "darkseagreen",
    }}>
    <Tab.Screen
      name="ちかすま"
      component={Navi}
      options={{
        tabBarIcon: () => <Icon name="rice" size={32} color="black" />,
      }}
    />
    <Tab.Screen
      name="お天気"
      component={Weather}
      options={{
        tabBarIcon: () => <Icon name="weather-sunny" size={32} color="black" />,
      }}
    />
    <Tab.Screen
      name="好き本"
      component={Book}
      options={{
        tabBarIcon: () => <Icon name="book" size={32} color="black" />,
      }}
    />
  </Tab.Navigator>
);

export default BottomTab;
こんなふうにコンポネントを挟んでいきます。一番上のちかすまというのは、前回あたりのブログに書いた「近くで済ますアプリ」の略で、これはStack Naviを使ってますがとくに問題ないです。
Propsがおかしなことにならなければ反対の利用方法でも大丈夫じゃないかと。
初期設計が大事なんだな。

残りの下の2個が、さっき言ってた1時間くらいでバーっと作ったもので、「お天気」はこれまただいぶ昔に作ったアプリをグワーッとReactHooks用に書き直したもので、「好き本」はGoogleBooksで書籍の情報が取れるAPI(があるのを調べた)を使ったものです。

で、このコンポーネントをapp.jsなんかに突っ込むと出来上がりです。

import BottomTabs from "./components/BottomTab";

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
}
作成途中で撮ったので2枚しかないですが、こんな感じになります。

4月の上旬でも紫外線量って高いんやなあ。と毎年思っている気がする。

タブで遷移してもそれぞれのコンポーネントはそのままの状態で再レンダリングなんかにはならないようです。って触った感触を書いているけれどボトムタブってそんな感じよねって他のアプリ触ってみて気付いた。
普段いかに意識しないで使っているのかってもんだわ。

下の画像はタブをぽちぽちしてみています。

それでは今回はこんな感じです。

Similar Posts:


Author: Takeken

インターネット利用者のITリテラシーを向上しようという目的で生まれた、2次元キャラのたけけんです。サーバー弄りからプログラミングまで幅広く書いています。自称エッセイスト。

Leave a Reply

Your email address will not be published. Required fields are marked *