【React Native】ディープリンクからアプリを起動する

今回は、React Native で URL からアプリの特定のページを開くことができるディープリンクを設定する方法についてです。

参考にさせていただいた記事はこちらから。

[React Native] URL Schemeを使用する – Qiita
https://qiita.com/sekitaka_1214/items/5fcc7845fc7db30a491f

まず、ディープリンクの URL を考えます。
今回は myapp://open を使用することにしました。

次に、Android、iOS に設定を追加します。
Android は、AndroidManifest.xml の <Activity> タグ内に下記を追加します。

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:host="open"
        android:scheme="myapp" />
</intent-filter>

iOS では、Info.plist に下記を追加します。

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>myapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

次に、AppDelegate.m に下記を追加します。

#import <React/RCTLinkingManager.h>

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

Android、iOS での設定は以上です。

最後に、React Native の設定です。
アプリが起動した際に一番最初に読み込まれるページのコンポーネントにコードを追加していきます。
サンプルコードは下記のとおりです。

import React, { Component } from 'react';
import { View, Linking } from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: null,
    }
    /**
     * URL を取得する
     */
    this.handleOpenURL = event => {
      if (event.url) {
        this.openFromUrlScheme(event.url)
      }
    }
    /**
     * URL を state に保存
     */
    this.openFromUrlScheme = url => {
      this.setState({ url: url });
    }
  }
  componentDidMount() {
    // アプリがURLから起動したかを検知
    this.urlScheme = Linking.addEventListener('url', this.handleOpenURL)
    Linking.getInitialURL().then((url) => {
      this.openFromUrlScheme(url);
    });
  }
  componentWillUnmount () {
    this.setState({ url: null });
    if (this.urlScheme) {
      this.urlScheme.remove();
    }
  }
  render() {
    return (
      <View>
        ......
      </View>
    );
  }
}
export default App;

とりあえず、ディープリンクからアプリが起動した場合は、その URL を取得して、state に保存するという処理を行っています。
なお、render() については省略していますので、任意の View を追加してください。
あとは、URL が取得出来たら特定のページに遷移させたり、指定した処理を実行させたりするなど、任意の処理を追加してください。

以上、React Native でディープリンクからアプリを開く機能を実装する方法についてです。
ご参考になれば幸いです。