React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する
スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 mkdir src mkdir src/screens touch src/screens/Sample.tsx 適当に作成する。 Sample.tsxは import React from "react"; import { ScrollView, View, Text } from "react-native"; const Sample = () => { return ( <ScrollView> <View> <Text>Sample</Text> </View> </ScrollView> ) } export default Sample; こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 import Sample from './src/screens/Sample' export default function App() { return ( <Sample /> ) } 同様にSample2とかを作成する。...