react-navigation 5 を使用して React Native でナビゲーションを処理する方法

React-navigation は、React Native でのナビゲーションについて話すときに頭に浮かぶナビゲーション ライブラリです。

私はこのライブラリの大ファンで、常に React Native でナビゲーションを処理するために使用する最初のソリューションです。これは、素晴らしく簡単な API があり、非常にカスタマイズ可能であるためです。

この記事を書いているのは、バージョン 5 がベータ版から安定版になったばかりだからです。いくつかの機能変更と、ルートを宣言するためのシンプルで異なる方法を提供する新しい API 設計が付属しています。

この記事では、新しい API について説明し、アプリケーションでそれらを使用する方法を見ていきます。

<ブロック引用>

原文は saidhayani.com で公開

インストール中

react-navigation のインストール方法は、以前のバージョン (>4.x) と比較して少し変わっています:

// > 4.x verions
yarn add react-navigation

react-navigation 5 のインストールは次のようになります:

// yarn
yarn add @react-navigation/native
// npm
npm install @react-navigation/native

最新バージョンの react-navigation では、アニメーションと遷移の処理に react-native-gesture-handler などの多くのサードパーティ ライブラリが使用されています。そのため、常にこれらのライブラリをインストールする必要があります。

// yarn
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
// npm
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

動的スクリーン

新しい API は、ルートの初期化にダイナミズムを導入します。以前は静的に行われていました - 基本的に、構成ファイルでルートを定義する必要がありました。

// @flow
import React from "react";

import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";


/** ---------Screens----------- */
// import LaunchScreen from "../Containers/LaunchScreen";
import HomeScreen from "../Containers/HomeScreen";

import ProfileScreen from "../Containers/ProfileScreen";
import LoginScreen from "../Containers/LoginScreen";






const StackNavigator = createStackNavigator(
  {
    initialRouteName: "Home"
  },
  {
    Home: {
      screen: HomeScreen
    },
     Login: {
      screen: LoginScreen,
      headerMode: "none",

    },
      Profile: {
      screen: ProfileScreen
    }



);

export default createAppContainer(StackNavigator);

新しい API には動的コンポーネントが付属しています。ナビゲーションをより動的にしました。
ルートを宣言する新しい方法は、次のようになります。

import React from "react"
import { SafeAreaView, StyleSheet, View, Text, StatusBar } from "react-native"

import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.containerStyle}>
        <AppNavigation />
      </SafeAreaView>
    </>
  )
}
const Stack = createStackNavigator()
const AppNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="home">
        <Stack.Screen name="home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
const HomeScreen = () => {
  return (
    <View style={styles.containerStyle}>
      <Text style={styles.title}>Home Screen</Text>
    </View>
  )
}

この新しい方法は動的で使いやすく、react-router API に似ています。

動的オプション

これは長い間、コミュニティから最も要望の多かった機能です。以前の方法 (静的) には常に問題があり、ナビゲーションの動作を動的に変更するのは非常に困難でした。

古い方法 => <4.x

古いバージョンの react-navigation では、静的オプションを定義する必要がありました。そして、これを動的に変更する方法はありませんでした.

  static navigationOptions = {
    title: "Sign In",
    header: null,
    mode: "modal",
    headerMode: "none"
  };

新しいメソッド (バージョン 5)

React-navigation には、非常にシンプルな動的メソッドが付属しています。 props だけを使用して、任意の画面にオプションを設定できます .

const AppNavigation = ({}) => {
  let auth = {
    authenticated: true,
    user: {
      email: "user@mail.com",
      username: "John",
    },
  }
  let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile"
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            title: ProfileScreenTitle,
            headerTintColor: "#4aa3ba",
            headerStyle: {
              backgroundColor: darkModeOn ? "#000" : "#fff",
            },
          }}
        />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

動的オプションを使用すると、認証に基づいてタイトルを変更できます。たとえば、ユーザーが認証されている場合、画面のタイトルをユーザーのユーザー名に設定したり、ヘッダーの backgroundColor を変更したりできます。

これは、動的テーマを使用している場合や、アプリにダーク モードを実装する場合に特に便利です。

フック

これは今のところ私のお気に入りの機能で、時間の節約になります。新しい API では、特定のアクションを実行するためのカスタム フックがいくつか導入されました。

たとえば、以前のバージョンでは、アクティブな画面の currentName を取得する必要がある場合、次のようなヘルパーを作成する必要がありました。

export function getCurrentRouteName(): string | null {
  const tag = "[getCurrentRouteNameSync] "
  const navState = getStore().getState().nav
  const currentRoute = getActiveRouteState(navState)
  console.log(tag + " currentRoute > ", currentRoute)
  return currentRoute && currentRoute.routeName ? currentRoute.routeName : null
}

フック API は、これらすべてを回避するのに役立ち、フックを使用して 1 行でナビゲーション API に簡単にアクセスできるようにします。

useRoute を使用して RouteName を簡単に取得できるようになりました フック。

import { useRoute } from "@react-navigation/native"
const AboutScreen = ({ navigation }) => {
  const route = useRoute()
  return (
    <View
      style={{
        justifyContent: "space-around",
        flex: 1,
        alignItems: "center",
      }}
    >
      {/*    Display the RouteName here */}
      <Text style={styles.title}>{route.name}</Text>
    </View>
  )
}

useNavigationState でも同じことができます 針。ナビゲーション状態にアクセスできます。

const navigationState = useNavigationState(state => state)
let index = navigationState.index
let routes = navigationState.routes.length
console.log(index)
console.log(routes)

React-navigation は他のフックも提供します。例:

• useFocuseEffect :画面がロードされたときにフォーカスされた画面を返す副作用フック
• useLinking :ディープリンクを処理します

ぜひチェックしてみてください。

まとめ

新しい react-navigation API は、確実に静的から動的に移行します。これは、React Native でのナビゲーションの処理方法を完全に変える素晴らしい方向性です。動的ルートは、react-navigation ユーザーからの大きな要望でした。この新しい方法は、より優れたユーザー ナビゲーション エクスペリエンスを作成するのに役立ちます。

React Native に関するその他のコンテンツはこちら

<ブロック引用>

読んでくれてありがとう

• ツイッター
• GitHub
• メーリングリストに参加

プロジェクトの React Native 開発者をお探しですか? 私に連絡してください .