【ReactNative】Tabを用いて画面遷移

はじめに

前回は、Push遷移での画面遷移を学習し、記事を書きました。参考までに

今回は画面遷移の学習の続きで、Tabでの画面遷移実装を行っていく。

こちらのライブラリーを用いて実装していきます。

内容

ライブラリーをインストール

npm install @react-navigation/bottom-tabs

以下が出力される。

added 1 package, and audited 1191 packages in 11s

65 packages are looking for funding
  run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Tab画面の管理

AppComponentで、画面遷移を管理する。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Button, View, Text, StyleSheet } from 'react-native';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeTab} />
        <Tab.Screen name="Details" component={DetailsTab} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

タブの画面管理

createBottomTabNavigator を使用して Tab オブジェクトを作成し、タブバーのナビゲーションを定義します。

タブ画面Componentを追加

<Tab.Screen name="Home" component={HomeTab} />

で、Homeという名前で、HomeTabComponentの画面を登録することができます。

Tab画面の作成

function HomeTab({ navigation }) {
  return (
    <View style={[styles.container, { backgroundColor: 'white' }]}>
    </View>
  );
}

Tab画面のComponentを作成

navigationという引数をもたせたComponentを作成し、Component内で画面を作成する。

完成

上記の内容を抑えた上で、Detail画面も作成し、シミュレーターで挙動の確認をしました。

iOS

Web

今回用いたサンプルコード

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Button, View, Text, StyleSheet } from 'react-native';


const Tab = createBottomTabNavigator();

function HomeTab({ navigation }) {
  return (
    <View style={[styles.container, { backgroundColor: 'white' }]}>
    </View>
  );
}

function DetailsTab({ navigation }) {
  return (
    <View style={[styles.container, { backgroundColor: 'lightblue' }]}>
    </View>
  );
}


function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeTab} />
        <Tab.Screen name="Details" component={DetailsTab} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default App;

まとめ

前回書いた記事と画面遷移の管理方法がおおかた一緒だったので、楽に実装ができました。App上で、NavigationContainer・Tab.Navigator・Tab.Screen を用いてTabでの画面遷移を管理して、タブバーで画面遷移することができました。

最後

他にも良い方法があれば、コメントいただけると大変うれしいです。

個人でアプリを作成しているので、良かったら覗いてみてください！