react-navigation/stackの使い方

ライブラリインストール

ターミナルからプロジェクトを作成したら、プロジェクトフォルダにカレントを移して、以下のコマンドを実行

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

// 関連する必要なライブラリをインストール
npm install react-native-gesture-handler

// iosの場合はpod-install
cd ios
pod install
cd ..

プログラミング

Home.tsxを作成

src/screens/homeのフォルダを作成して、その下にHome.tsxを作成。以下の内容を記述。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text } from 'react-native-elements';

export const Home: React.FC = () => {

  return (
    <View style={styles.container}>
      <Text h1>Home</Text>
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Home2.tsxを作成

実質使いませんが、同じフォルダにHome2.tsxを作成して、プログラムはHomeをHome2に変えて同じように記述。

App.tsxにルーティングを記述

今回はreact-navigation/stackを使用したルーティングで簡素に記述。

import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { Home } from './src/screens/home/Home';
import { Home2 } from './src/screens/home/Home2';

const Stack = createStackNavigator();

function App(): JSX.Element {
  return (
    <Stack.Navigator initialRouteName='Home'>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Home2" component={Home2} />
    </Stack.Navigator>
  );
}

export default App;

実行

react-native run-iosで実行すると、エラーになります。

正しい方法

react-navigationは複数の画面遷移方法を提供していますが、本体と本体の依存関係となるライブラリが必須です。
先ほどのNavigationContainerは本体（react-navigation/native）に含まれる機能です。

本体／依存ライブラリ

• react-navigation/native
• react-native-screens
• react-native-safe-area-context

これらをインストールすることが必須。

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

cd ios
pod install
cd ..

その上で、ルーティングのルートでは、react-navigation/nativeライブラリのNavigationContainerでラッピングすることが求められます。

App.tsxを書き換えます。

import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { Home } from './src/screens/home/Home';
import { Home2 } from './src/screens/home/Home2';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Home2" component={Home2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

再実行

動きました。

画面遷移のボタンを追加

Home.tsxとHome2.tsxにそれぞれの画面に遷移するためのボタンを追加
（以下はHome.tsxの内容を掲載。HomeのところをHome2にすればHome2.tsxの内容になります。）

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text, Button } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';

export const Home: React.FC = () => {

  const nav = useNavigation();

  return (
    <View style={styles.container}>
      <Text h1>Home</Text>
      <Button onPress={() => nav.navigate('Home2')} title="Home2に遷移" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

実行結果

ボタンを押すと画面が切り替わります。
StackなのでHome2のときにはヘッダ左側に前画面に戻るためのボタンが配置されます。これを押してもHomeに遷移します。（戻ります）

ヘッダ左側のボタンを消したい場合

ルーティングを少し変更します。（App.tsx）

import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { Home } from './src/screens/home/Home';
import { Home2 } from './src/screens/home/Home2';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Home2" component={Home2} options={{ headerLeft: () => undefined }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

実行結果

Home2のヘッダ左側に、前画面に戻るためのボタンが表示されなくなりました。

まとめ

今回はreact-navigation/stackを試してみました。

react-navigationを使うには以下のような手順になります。

1. 本体ライブラリをインストールする
2. 対象のNavigatorライブラリをインストールする
3. 本体ライブラリのNavigationContainerをラッピングする
4. NavigationContainerの中で、Navigatorを使った遷移をする

次回は、似たようなものでNative StackというNavigatorが用意されていたので、そちらを使ってみます。