React Native入門(2)〜タブナビゲーションに1つタブを増やす〜
前回にReact Nativeに入門したのですが、サンプルはタブナビゲーションのタブ数が2つしかないので、3つに増やすことを今回はやっていきます。
さて、まずは screens/TabThreeScreen.tsx
に画面を表示するための記述を追加していきます・・・が、今回はサンプルなので、 screens/TabTwoScreen.tsx
をコピペして、 Two
を Three
に置換しました。
次に、ナビゲーションバーにTab Threeへ遷移するボタンが必要です。
navigation/BottomTabNavigator.tsx
に以下を加えます。
<BottomTab.Screen name="TabThree" component={TabThreeNavigator} options={{ tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />, }} />
さて、 name
で怒られますが、 types.tsx
の BottomTabParamList
にないと怒られているので、ここに TabThree
を追加してあげます。
さらに、 component
に TabThreeNavigator
がないと怒られるので、これを作っていきます。
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 というものを使っているようで、ここの記述を追加した形になります。
React Routerの <Router>
が、React Navigatorの <x.Navigator>
に相当して、 React Routerの <Route>
が React Navigatore の <x.Screen>
に相当する感じかと思います(乱暴)
さて、これで3つ目の画面ができました。
今回の差分はこちらとなります。
次は、この3画面目にリスト表示をすることをやっていきます。