hAcKTion

日々のアウトプット場所。

React Native入門(2)〜タブナビゲーションに1つタブを増やす〜

前回にReact Nativeに入門したのですが、サンプルはタブナビゲーションのタブ数が2つしかないので、3つに増やすことを今回はやっていきます。

hacktion.hateblo.jp

さて、まずは screens/TabThreeScreen.tsx に画面を表示するための記述を追加していきます・・・が、今回はサンプルなので、 screens/TabTwoScreen.tsx をコピペして、 TwoThree に置換しました。

次に、ナビゲーションバーにTab Threeへ遷移するボタンが必要です。

navigation/BottomTabNavigator.tsx に以下を加えます。

<BottomTab.Screen
  name="TabThree"
  component={TabThreeNavigator}
  options={{
    tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
  }}
/>

さて、 name で怒られますが、 types.tsxBottomTabParamList にないと怒られているので、ここに TabThree を追加してあげます。 さらに、 componentTabThreeNavigator がないと怒られるので、これを作っていきます。

navigation/BottomTabNavigator.tsx の最後に、 TabTwoNavigator() を参考に、以下を書き足します。

const TabThreeStack = createStackNavigator<TabThreeParamList>();

function TabThreeNavigator() {
  return (
    <TabThreeStack.Navigator>
      <TabThreeStack.Screen
        name="TabThreeScreen"
        component={TabThreeScreen}
        options={{ headerTitle: 'Tab Three Title' }}
      />
    </TabThreeStack.Navigator>
  );
}

TabThreeParamList がないので、 types.tsx に、これまた TabTwoParamList を参考に以下を書き足します。

export type TabThreeParamList = {
  TabThreeScreen: undefined;
};

そして、 navigation/BottomTabNavigator.tsx でインポートします。

さて、ボタンを追加するだけと思ってコピペしてしまったため、エラー解決のために一気にルーティングの設定まで行ってしまったのですが、React Native向けのルーティングや画面遷移を実現してくれる React Navigator というものを使っているようで、ここの記述を追加した形になります。

reactnavigation.org

React Routerの <Router> が、React Navigatorの <x.Navigator> に相当して、 React Routerの <Route> が React Navigatore の <x.Screen> に相当する感じかと思います(乱暴)

さて、これで3つ目の画面ができました。

今回の差分はこちらとなります。

次は、この3画面目にリスト表示をすることをやっていきます。