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

目次

1. ライブラリのインストール
2. 表示する画面を用意する
3. App.jsに表示する画面を設定する
4. 画面遷移処理の実装
5. パラメータを渡す場合の記述
参照１
参照２

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

@react-navigationをインストールする

$ npm install @react-navigation/native
$ npm install @react-navigation/stack

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

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

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;

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が起動時の画面になる

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を指定する)

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でオブジェクトを取得できる

Main.js

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

AddScreen.js

  useEffect(() => {
    console.log(props.route.params.data);
  }, [props]);