## はじめに
今回はReact Navigationの基礎的な実装方法を備忘録として書いていきます。

## React Navigationとは
React Navigationは、React Nativeで画面遷移やナビゲーションを管理する時に使うライブラリです。
React Navigationはこのフレームワークにおいて画面遷移とナビゲーションを実装するためのコンポーネントとAPIを提供しています。

## React Navigatinoを始める
まずは、React Navigationをインストールしていきます。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

次に、App.jsxファイルに以下の記述をしてきます。
以下のように書くと、React Navigationがアプリケーションに適用されます。
![img](/mosaic-code.jpg)

## 画面遷移を実装
画面遷移を実装していきます。
まずはStack Navigatorから紹介します。

https://reactnavigation.org/docs/stack-navigator

今回は、二つの簡単な画面を作り、ボタンで画面遷移してみましょう。
screensフォルダを作り、「HomeScreen.jsx」と「DetailScreen.jsx」を作成します。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)
コードの説明をしていきます。
まずは、以下のコードでcreateNativeStackNavigatorをインポートします。
![img](/mosaic-code.jpg)

次に、navigationを引数にセットします。
navigationを使うことで、画面遷移に必要な機能をコード上で使えるようにします。
![img](/mosaic-code.jpg)

そして、画面遷移するためのボタンを設置します。
ユーザーがボタンを押したときのイベントを定義するには、React NativeではonPressを使います。
onPressの中身に、引数にあるnavigationからnavigateを指定して、その引数に"Detail"(画面名)を指定します。
![img](/mosaic-code.jpg)

すると、ボタンを押すことで、Detail画面に遷移することができます。
☟


次からは、様々なNavigatorsを紹介します。

## Bottom Tabs Navigator
https://reactnavigation.org/docs/bottom-tab-navigator

こちらは、以下の画像のようなNavigationを実装できます。
☟
![スクリーンショット 2023-10-20 19.02.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c1b4be17-85b5-53d7-fc88-612ffbb1db9b.png)


![img](/mosaic-code.jpg)

## Material Bottom Tabs Navigator

https://reactnavigation.org/docs/material-top-tab-navigator

インストールは以下のコマンドになります。
![img](/mosaic-code.jpg)
サンプルコードは以下のようになります。

![img](/mosaic-code.jpg)

すると以下のような画面になります。
アイコンは表示されていませんが、許してください...
![スクリーンショット 2023-10-20 19.20.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8281782f-547f-c993-931b-949a419b8fcc.png)

## Material Top Tabs Navigator

こちらはスライドすると、ページが切り替わるTabNavigationになります。

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


![img](/mosaic-code.jpg)

画面表示としては以下のようになります。
![スクリーンショット 2023-10-20 19.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/18d27fee-bc73-96d7-4c7e-a5338c8695f2.png)


## 参考
参考にしたドキュメントは以下になります。

https://reactnavigation.org/docs/getting-started/


## 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

## はじめに
今回はReact Navigationの基礎的な実装方法を備忘録として書いていきます。

## React Navigationとは
React Navigationは、React Nativeで画面遷移やナビゲーションを管理する時に使うライブラリです。
React Navigationはこのフレームワークにおいて画面遷移とナビゲーションを実装するためのコンポーネントとAPIを提供しています。

## React Navigatinoを始める
まずは、React Navigationをインストールしていきます。
``` :npm
npm install @react-navigation/native
```

``` :yarn
yarn add @react-navigation/native
```

次に、App.jsxファイルに以下の記述をしてきます。
以下のように書くと、React Navigationがアプリケーションに適用されます。
```jsx
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}
```

## 画面遷移を実装
画面遷移を実装していきます。
まずはStack Navigatorから紹介します。

https://reactnavigation.org/docs/stack-navigator

今回は、二つの簡単な画面を作り、ボタンで画面遷移してみましょう。
screensフォルダを作り、「HomeScreen.jsx」と「DetailScreen.jsx」を作成します。
``` /screens/HomeScreen.jsx
import * as React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { Button } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate("Detail")
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: "pink",
    alignItems: "center",
    justifyContent: "center",
  },
});
```

``` /screens/DetailScreen.jsx
import React from "react";
import { Button, Text, View } from "react-native";

export const DetailScreen = ({ navigation }) => {
  return (
    <View>
      <Button title="Go to Home" onPress={() => navigation.navigate("Home")} />
      <Text>{itemId}</Text>
    </View>
  );
};
```
コードの説明をしていきます。
まずは、以下のコードでcreateNativeStackNavigatorをインポートします。
```/screens/HomeScreen.jsx
import { createNativeStackNavigator } from "@react-navigation/native-stack";
```

次に、navigationを引数にセットします。
navigationを使うことで、画面遷移に必要な機能をコード上で使えるようにします。
```/screens/HomeScreen.jsx
export const HomeScreen = ({ navigation }) => {
```

そして、画面遷移するためのボタンを設置します。
ユーザーがボタンを押したときのイベントを定義するには、React NativeではonPressを使います。
onPressの中身に、引数にあるnavigationからnavigateを指定して、その引数に"Detail"(画面名)を指定します。
```/screens/HomeScreen.jsx
<Button
    title="Go to Details"
    onPress={() => navigation.navigate('Detail')}
/>
```

すると、ボタンを押すことで、Detail画面に遷移することができます。
☟


次からは、様々なNavigatorsを紹介します。

## Bottom Tabs Navigator
https://reactnavigation.org/docs/bottom-tab-navigator

こちらは、以下の画像のようなNavigationを実装できます。
☟
![スクリーンショット 2023-10-20 19.02.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c1b4be17-85b5-53d7-fc88-612ffbb1db9b.png)


```App.js
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { HomeScreen } from "./screens/HomeScreen";
import { NewMemoScreen } from "./screens/NewMemoScreen";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="HomeTab"
          component={MemoStack}
          options={{ headerShown: false, title: "HOME" }}
        />
        <Tab.Screen
          name="NewMemoScreen"
          component={NewMemoScreen}
          options={{ headerShown: false, title: "NEW" }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

```

## Material Bottom Tabs Navigator

https://reactnavigation.org/docs/material-top-tab-navigator

インストールは以下のコマンドになります。
```
npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons
```
サンプルコードは以下のようになります。

``` jsx
<NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="HomeTab"
          component={MemoStack}
          options={{ headerShown: false, title: "HOME" }}
        />
        <Tab.Screen
          name="NewMemoScreen"
          component={NewMemoScreen}
          options={{ headerShown: false, title: "NEW" }}
        />
      </Tab.Navigator>
    </NavigationContainer>
```

すると以下のような画面になります。
アイコンは表示されていませんが、許してください...
![スクリーンショット 2023-10-20 19.20.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8281782f-547f-c993-931b-949a419b8fcc.png)

## Material Top Tabs Navigator

こちらはスライドすると、ページが切り替わるTabNavigationになります。

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


``` jsx
<NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      tabBarItemStyle: { width: 100 },
      tabBarItemStyle: { marginTop: 100 },
    }}
  >
    <Tab.Screen
      name="HomeTab"
      component={MemoStack}
      options={{ headerShown: false, title: "HOME" }}
    />
    <Tab.Screen
      name="NewMemoScreen"
      component={NewMemoScreen}
      options={{ headerShown: false, title: "NEW" }}
    />
  </Tab.Navigator>
</NavigationContainer>
```

画面表示としては以下のようになります。
![スクリーンショット 2023-10-20 19.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/18d27fee-bc73-96d7-4c7e-a5338c8695f2.png)


## 参考
参考にしたドキュメントは以下になります。

https://reactnavigation.org/docs/getting-started/


## 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


はじめに

React Navigationとは

続きを読むには単価診断を受けてください（30秒）