ReactNativeアプリで画面遷移機能を実装する

# 目次
[1. ライブラリのインストール](#1-ライブラリのインストール)
[2. 表示する画面を用意する](#2-表示する画面を用意する)
[3. App.jsに表示する画面を設定する](#3-appjsに表示する画面を設定する)
[4. 画面遷移処理の実装](#4-画面遷移処理の実装)
[5. パラメータを渡す場合の記述](#5-パラメータを渡す場合の記述)
[参照１](https://www.digitalocean.com/community/tutorials/react-react-native-navigation-ja)
[参照２](https://reffect.co.jp/react/react-navigation#Screen)

# 1. ライブラリのインストール

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

# 2. 表示する画面を用意する

メイン画面用js(Main.js)と遷移先画面用js(AddScreen.js)を用意する

```javascript:Main.js
import React,{ useState,useEffect,useRef,Component,useContext } from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
  Button,
} from 'react-native';

const Main: () => Node = (props) => {

  return (
    <View>
      <Text>Main</Text>
    </View>
  );
};
export default Main;
```

```javascript:AddScreen.js
import React,{ useState,useEffect,useRef,Component,useContext } from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
  Button,
} from 'react-native';

const AddScreen: () => Node = (props) => {

  return (
    <View>
      <Text>AddScreen</Text>
    </View>
  );
};
export default AddScreen;
```

# 3. App.jsに表示する画面を設定する

App.jsのimportに追記修正、createStackNavigator()を使って複数画面を制御する
デフォルトでは一番最初のStack.Screenが起動時の画面になる

```javascript:App.js
import 'react-native-gesture-handler';    //追記
import React,{ useState,useEffect,useRef,Component,useContext } from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';    //追記
import { createStackNavigator } from '@react-navigation/stack';    //追記
import Main from './Main';    //追記
import AddScreen from './AddScreen';    //追記

const Stack = createStackNavigator();    //追記



const App: () => Node = () => {

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen
          name="Main"
          component={Main}
        />
        <Stack.Screen
          name="AddScreen"
          component={AddScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
```

# 4. 画面遷移処理の実装

navigation.navigateで画面遷移を実行する(Screenのnameを指定する)

```javascript:Main.js
  return (
    <View>
      <Text>Main</Text>
    </View>
    <View>
      <Button
        title="AddScreen"
        onPress={() =>
          props.navigation.navigate('AddScreen')
        }
      />
    </View>
  );
```

# 5. パラメータを渡す場合の記述

データを渡す場合の記述と受け取り側の処理(Screenのnameの後にオブジェクトを追記する)
受け取り側のuseEffectでpropsの変更をキャッチ、props.route.paramsでオブジェクトを取得できる

```javascript:Main.js
  return (
    <View>
      <Text>Main</Text>
    </View>
    <View>
      <Button
        title="AddScreen"
        onPress={() =>
          props.navigation.navigate('AddScreen', {
            data: 'test'
          })
        }
      />
    </View>
  );
```

```javascript:AddScreen.js
  useEffect(() => {
    console.log(props.route.params.data);
  }, [props]);
```