ReactNativeでnavigationを使ってみる

# 概要
- ReactNativeを使って画面遷移の実装をしてみる

# 実際の完成物

[![Image from Gyazo](https://i.gyazo.com/d094151b4b847e077890b0d4292c1393.gif)](https://gyazo.com/d094151b4b847e077890b0d4292c1393)

# 環境
- MacBookAir（intel）/ MacBookPro（M1Pro）
- OS：Monterey（12.0.1）
- VSCode
- Xcode
- npm：8.3.1
- yarn：1.22.17
- expo：5.2.0

# 手順1
> まずはexpoコマンドを使ってプロジェクトを作り、作ったプロジェクトに移動します。
```
% expo init [アプリ名]
```
上記のコマンド実行後はテンプレートを選択しますが、ここでは`一番上のblank`を選択します。
```
% cd [アプリ名]
```
アプリが起動できるか試します。
```
% npm start
// もしくは
% yarn start
```

![スクリーンショット 2022-04-04 0.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/20cec863-b043-0d08-a4b8-06deb38e660b.png)

アプリが起動できれば無事手順1は完了です。

# 手順2
> React Navigatorの設定

react-navigation/nativeのインストール

```
% npm install @react-navigation/native
```
```
% expo install react-native-screens react-native-safe-area-context
```
```
% npm install @react-navigation/native-stack
```
無事インストールができたら手順2は完了です。


# 手順3
> 必要なフォルダとファイルを作る

まずはHomeScreenフォルダを作り、その中にHomeScreen.jsを作成します。
UserScreenも同様に作成します。
![スクリーンショット 2022-04-04 0.49.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/dec05ba9-53bc-2c78-55a6-bd591e04452d.png)


# 手順4
> ホーム画面とユーザー画面の作成

`HomeScreen.js`と`UserScreen.js`の中身を以下のように記述します。
```HomeScreen.js
import React from "react";
import { StyleSheet, View, Text } from "react-native";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

```

```UserScreen.js
import React from "react";
import { StyleSheet, View, Text } from "react-native";

const UserScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ユーザ画面</Text>
    </View>
  );
};

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

export default UserScreen;

```

# 手順5
> `App.js`に先程作った`HomeScreen.js`と`UserScreen`を読み込む

> またこの段階で`App.js`にreact-navigation/nativeからimportするNavigationContainerを使えるように記述をしましょう。

> 同様に`createNativeStackNavigator`も利用できるようにimportしておきましょう。

```App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./HomeScreen/HomeScreen";
import UserScreen from "./UserScreen/UserScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="User" component={UserScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

ここまでできれば、ひとまず以下のようになっているはずです。
![スクリーンショット 2022-04-04 1.17.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/d6042eb4-7a17-23d9-2053-d12afc74ec2b.png)

ただし、この状態では画面遷移することはできません。
そこで`Stack.Navigatorコンポーネント`に対して`initialRouteName`を設定することで、
最初に表示する画面を指定できます。
今回はホーム画面を最初の画面に設定したいので、
`initialRouteName`に`Home`を指定します。
![スクリーンショット 2022-04-04 1.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/22631891-43a3-bcfd-43a2-c39b8c60fb94.png)


# 手順6
> HomeScreen.jsにボタンを追加する

ホーム画面からユーザー画面に繊維するためのボタンを追加します。

```HomeScreen.js
import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button title="ユーザ画面に繊維する" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

```

ただしボタンを追加してもまだ画面は繊維しません。
![スクリーンショット 2022-04-04 1.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/79f7c737-cc63-1861-a0c2-2d6ea9e05a82.png)

ここでユーザー画面に繊維できるように設定をしていきます。
設定する前にまずはStack.Screenの設定したコンポーネントに渡されるpropsを確認します。

```HomeScreen.js
import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = (props) => {
  console.log(props)
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button title="ユーザ画面に繊維する" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

```
コンソールに表示されたpropsを確認するとオブジェクトの中に`navigation`オブジェクトが確認できます。
![スクリーンショット 2022-04-04 1.32.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/72d703da-6c38-c5e6-75e1-5edaa32e20fc.png)

実際に`navigation`オブジェクトを設定してみます。

```HomeScreen.js
import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button
        title="ユーザ画面に繊維する"
        onPress={() => navigation.navigate("User")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

```

[![Image from Gyazo](https://i.gyazo.com/d094151b4b847e077890b0d4292c1393.gif)](https://gyazo.com/d094151b4b847e077890b0d4292c1393)

onPressイベントにボタンをタップするとユーザー画面に繊維するように設定することで、ユーザー画面に繊維できることが確認できたと思います。

お疲れ様でした！