React Native × React Navigation v5 で Deep linking

はじめに

またしても React Navigation v5 の記事です。
今回は Deep linking を実装していきます。

下準備

iOS 用の設定をします。

URL Typesの設定をおこないます。

次に、 AppDelegate.mを修正します。

コードはこちらです。

#import "AppDelegate.h" // 元からある
#import <React/RCTLinkingManager.h>

...

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

これだけで、 Safari などで<URL Schemas>://xxxxのように入力すれば、アプリを開くことができます。

これでアプリへのアクセスはできるようになりました。
各ページへの遷移は React Navigation と組み合わせて使うと便利です。
以下ではその方法を実装していきます。

React Navigation v5 で Deep linking

公式ドキュメントを参考に、useLinkingを使用します。

const App: React.FunctionComponent = () => {
  const ref = useRef();
  const { getInitialState } = useLinking(ref, {
    prefixes: ['srn5://'],
    config: {
      Details: 'details',
    },
  });
  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState();

  useEffect(() => {
    Promise.race([
      getInitialState(),
      new Promise((resolve) => setTimeout(resolve, 150)),
    ])
      .catch((e) => {
        console.error(e);
      })
      .then((state) => {
        if (state !== undefined) {
          setInitialState(state);
        }

        setIsReady(true);
      });
  }, [getInitialState]);

  if (!isReady) {
    return null;
  }

  return (
    <AuthProvider>
      <NavigationContainer initialState={initialState} ref={ref}>
        <HomeNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

refを定義して、NavigationContainerとuseLinkingに渡しています。
useLinkingのconfigでパスと画面を紐づけています。

HomeNavigatorは下記の形で定義しています。

import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';

const Stack = createStackNavigator();
const HomeNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Details" component={Details} />
  </Stack.Navigator>
)

通常のアクセスだとHomeが表示されますが、srn5://detailsにアクセスするとDetailsが直接開きます。

おわりに

今回は、 Deep linking の実装について紹介しました。

実際に利用する場合、ユニバーサルリンク（https://~~~）という形で利用するのが現実的かと思いますが、まずはこの方法で簡易的なアプリへのリンクを設定することができます。

参考

https://reactnative.dev/docs/linking#handling-deep-links
https://reactnavigation.org/docs/deep-linking/