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

## はじめに


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

https://qiita.com/muranakar/items/34a124556dc7ad2f8e89

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

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

https://reactnavigation.org/docs/bottom-tab-navigator/


## 内容
### ライブラリーをインストール
```
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で、画面遷移を管理する。

```js
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`という名前で、`HomeTab`Componentの画面を登録することができます。


### Tab画面の作成
```js
function HomeTab({ navigation }) {
  return (
    <View style={[styles.container, { backgroundColor: 'white' }]}>
    </View>
  );
}
```

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


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

### iOS
![Simulator Screen Recording - iPhone 15 Pro - 2024-01-21 at 06.14.40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/10ca48e8-1b60-fc98-31cd-ab1a5a88617b.gif)

### Web
![2024:01:21　Tab遷移　Web.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/83aefc35-2f9c-19ae-e60e-d198d2d43b6b.gif)


<details><summary>今回用いたサンプルコード</summary>

```ｊｓ
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;


```
</details>


## まとめ

https://qiita.com/muranakar/items/34a124556dc7ad2f8e89

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

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

https://sites.google.com/view/muranakar

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