【ReactNative】画面遷移する

## はじめに
ReactNativeを用いて画面遷移の実装を行っていく。

環境構築に関しては以下のリンクを参照ください。

https://qiita.com/muranakar/items/8d0cb2044fe836fe758e


## 画面遷移に関して

### ライブラリーのインストール
画面遷移を実現するために、下記のライブラリーをインストールします。

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

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

以下を実行
```
npm install @react-navigation/native @react-navigation/stack
```

出力結果
```

added 29 packages, and audited 1625 packages in 16s

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

7 moderate severity vulnerabilities

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

Run `npm audit` for details.
```

### 画面遷移の実装
画面遷移の実装を行っていきます。

今回はApp.jsに画面遷移元、先を実装しました。コードを交えて説明します。

提供されたコードの内部を詳細に説明します。

```react
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button, View, Text } from 'react-native';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

#### ライブラリーをimport
Componentをインポートします。
- `@react-navigation/native` から `NavigationContainer` コンポーネント
- `@react-navigation/native-stack` から `createNativeStackNavigator` コンポーネント
- `react-native` から `Button、View、Text` コンポーネント

#### createNativeStackNavigatorで画面遷移を管理
`createNativeStackNavigator` を使用して `Stack` オブジェクトを作成します。このスタックナビゲーションは、アプリケーション内で画面遷移を管理します。

#### NavigationContainer内で画面遷移先を登録
App 関数は、NavigationContainer コンポーネント内に Stack.Navigator を含み、アプリケーション全体のナビゲーションコンテナを作成します。
Stack.Navigator 内に2つのスクリーンが定義されています。
- "Home" という名前のスクリーンで、初期に表示される画面
- "Details" という名前のスクリーンで、画面遷移後に表示される画面

これらのスクリーンはそれぞれ HomeScreen と DetailsScreen コンポーネントと関連付けられています。

### 画面遷移元

```react
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details');
        }}
      />
    </View>
  );
}
```

#### 遷移元画面でプロパティを受け取る
HomeScreen 関数コンポーネントは、navigation プロパティを受け取ります。これは、スタックナビゲーション内で画面間の遷移を制御するために使用されます。

#### Appで登録している`Details`画面に遷移
ボタンが押されると、navigation.navigate('Details') を呼び出して "Details" スクリーンに遷移します。

### 遷移先

```react
function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button
        title="Go back to Home"
        onPress={() => {
          navigation.goBack();
        }}
      />
    </View>
  );
}

```

#### 画面遷移先でもプロパティを受け取る
DetailsScreen 関数コンポーネントも同様に、navigation プロパティを受け取ります。

#### 一つ前に表示されていた画面に遷移する
ボタンが押されると、navigation.goBack() を呼び出して前の画面に戻ります。
navigation.goBack() は、スタックナビゲーション内で現在の画面を前の画面に戻るためのメソッドです。スタックナビゲーションは、画面をスタックのように管理し、新しい画面をスタックに追加し、navigation.goBack() を呼び出すとスタックの最後の画面に戻るように動作します。

### 完成
上記の実装により、NavigationContainer と Stack.Navigator を使用して、2つの画面間の画面遷移を実現するReact Nativeのアプリが作成できました。ホーム画面から詳細画面に遷移し、詳細画面からホーム画面に戻ることができます。



最後にスタイルを当てると、

![Simulator Screen Recording - iPhone 15 Pro - 2024-01-20 at 07.06.10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/4b1aec2b-a92c-ba25-f66f-8ad8ee1855b9.gif)
![2024:01:20Android.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/07a4947f-76a5-604d-8480-40b583482f6a.gif)
![2024:01:21Webスクリーン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799713/6916cca6-61c7-4b1c-aaf8-ad713bc36915.gif)


## まとめ・感想
画面遷移はReact Navigation　ライブラリーを用いて実装することができました。App上で、`NavigationContainer`・`Stack.Navigator`・`Stack.Screen` で画面遷移を管理して、画面遷移先を指定することによって実現できました。私はまだにクロスプラットフォームになれておらず、webブラウザ上で挙動を確認できることに驚き、感動しています。


他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

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

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