react-navigation/native-stackの使い方

ライブラリインストール

前回の失敗を踏まえ、コアライブラリからインストールしていきます。
今回はnative-stackです。

// コアライブラリをインストール
npm install @react-navigation/native

// コアライブラリの依存関係を持つライブラリもインストール
npm install react-native-screens react-native-safe-area-context

// native-stackのライブラリをインストール
npm install @react-navigation/native-stack

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

プログラミング

基本はStackの時と同じにします。

Home.tsxとHome2.tsxを作成

src/screens/homeのフォルダを作成して、その下にHome.tsxとHome2.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',
  },
});

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

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

import { createNativeStackNavigator } from '@react-navigation/native-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 = createNativeStackNavigator();

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;

実行

今回の実行結果は、前回のStackと動きを比較してみます。

基本的には同じレイアウトで同じ動きをしていますが、Home2のヘッダ左側のボタンがNative Stackでは表示されたままになっています。

両方ともoptionsで隠すように記述していますが、その点の効果が異なるようです。

StackとNative Stackの違い

公式のページを読んでみると、以下のようなことが書かれています。（こちら）

Stackはカスタマイズがしやすいのが特徴で、Nativeを使ってアニメーションやジェスチャを実行しているものの、JavaScript実装であるため、パフォーマンスに懸念がある。

Native StackはNativeのパフォーマンスを提供するのが特徴で、一方でStackよりカスタマイズ性は劣る。

つまり、両方とも画面遷移の表現は同じですが（ヘッダ横のボタンで違いはありましたが）、カスタマイズ性とパフォーマンスのトレードオフで２通りの提供をしているという解釈になるようです。

まとめ

StackとNative Stackは用途によって使い分けができるようですが、基本的にはパフォーマンス重視でNative Stackで良いのかなという印象です。
今回は、ヘッダ左側のボタンが消えないという違いはありましたが、モーダルを指定した画面では、ボタンを消すことができるのは別途確認しましたので、そこも含めて用途による使い分けだと思います。