react-navigationで画面遷移をする【ReactNative+expo】


# はじめに

初めまして[Tutu](https://twitter.com/padde_cross)と申します。
最近**react-native**の勉強を始めました。
その中でreact-navigation(5系)を使う機会があったので備忘録として残しておきたいと思います。


# 準備
react-navitaionをインストール
`npm install @react-navigation/native`

react-navigation-stackをインストール
`npm install @react-navigation/stack`

依存ライブラリをインストール(expoを使用)
`expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view`

# 環境
react-navigation-native ： 5.8.9
react-navigation-stack : 5.12.6


#実装

### 遷移の設定

`CreateStackNavigator`で遷移先登録のための初期化処理をします。(おまじないみたいなものなので気にしないで大丈夫です。)

```javascript:初期化
const Stack = createStackNavigator();
```

ここで遷移先の登録と初期条件などを設定します。（今回はfunctionComponentで書いています）
例えば`initialRouteName`に設定した名前が最初の画面になったり、ヘッダーの情報をデフォルトで設定しておくことができます。

※詳細は[公式](https://reactnavigation.org/docs/hello-react-navigation)をご覧ください。

```javascript:画面登録
const RootStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="Home"　//最初の画面
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#265366",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                    fontWeight: "bold",
                },
            }}>
            <Stack.Screen name="Home" component={MemoListScreen} />
            <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        </Stack.Navigator>
    );
};
```

最後に`NavigationContainer`でラップし、**App.js**に登録することで設定したコンポーネントで**react-navigation**を使うことができるようにします。

```javascript:遷移画面の管理

export default function App() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
}
```


```javascript:App.js(全体)

import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import MemoDetailScreen from "./src/screens/MemoDetailScreen";
import MemoListScreen from "./src/screens/MemoListScreen";

//createStackNavigatorを初期化
const Stack = createStackNavigator();

//遷移画面の登録
const RootStack = () => {
	return (
		<Stack.Navigator
			initialRouteName="Home"　//最初の画面
			screenOptions={{
				headerStyle: {
					backgroundColor: "#265366",
				},
				headerTintColor: "#fff",
				headerTitleStyle: {
					fontWeight: "bold",
				},
			}}>
			<Stack.Screen name="Home" component={MemoListScreen} />
			<Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
		</Stack.Navigator>
	);
};

//NavigationContainerで囲む必要があるためfunctionalコンポーネントを使用
export default function App() {
	return (
		<NavigationContainer>
			<RootStack />
		</NavigationContainer>
	);
}
```
### 遷移方法

遷移させたい処理に以下を記述することで遷移が可能になります。
（今回はボタンを押した際に遷移する処理としました。）

```javascript
data.navigation.navigate("MemoDetail");　
```

```javascript:遷移方法
import React from "react";
import {StyleSheet, View, Text} from "react-native";
import MemoList from "../components/MemoList";
import CircleButton from "../elements/CircleButton";

const styles = StyleSheet.create({
	container: {
		flex: 1,
		width: "100%",
	},
});

const MemoListScreen = (data) => (
	<View style={styles.container}>
　　　　//別のコンポーネントにnavigationの情報を渡している(今回は関係なし)
		<MemoList navigation={data.navigation}/>　
		<CircleButton
			name="plus"
			onPress={() => {
				data.navigation.navigate("MemoDetail");　//遷移先
			}}
		/>
	</View>
);

export default MemoListScreen;



```


# 最後に
今回**react-navigation**を実装するにあたり5系かつ**function Component**(Const)を利用した情報が少なかったため、備忘録として残しておきました。
また、初学者のため間違っている等ありましたらご指摘いただけるとありがたいです。


# 参考文献
- [公式](https://reactnavigation.org/docs/hello-react-navigation)