H5跳轉ReactNative打開指定頁面

一、需求

工做可能有這樣的需求，就是手機瀏覽器中加載一個h5頁面，點擊能夠打開某一個APP，好比微信等。這時候一般都是採用URL Scheme的方式進行配置跳轉。 那麼什麼是URL Scheme呢？ 簡單說：它是一個頁面跳轉協議。

二、 URL Scheme協議

URL Scheme是一種頁面內跳轉協議，是一種很是好的實現機制，經過定義本身的scheme協議，能夠很是方便跳轉app中的各個頁面；經過scheme協議，服務器能夠定製化告訴App跳轉那個頁面，能夠經過通知欄消息定製化跳轉頁面，能夠經過H5頁面跳轉頁面等。

蘋果手機中的APP都有一個沙盒，APP就是一個信息孤島，相互是不能夠進行通訊的。可是iOS的APP能夠註冊本身的URL Scheme，URL Scheme是爲方便app之間互相調用而設計的。

URL Scheme必須能惟一標識一個APP，若是你設置的URL Scheme與別的APP的URL Scheme衝突時，你的APP不必定會被啓動起來。由於當你的APP在安裝的時候，系統裏面已經註冊了你的URL Scheme。 完整的URL Scheme格式：

stars://host:8088/pageDetail?pageId=102
複製代碼

1.stars:表示Scheme協議名稱,能夠自定義 2.host: 表示協議的跳轉地址名稱，一般和APP中配置的名稱是一直的 3.pageDetail:表示跳轉的具體頁面名稱 4.pageId:表示傳遞的參數 5.8088：一般表示跳轉地址的端口名稱

三、具體使用配置

Android配置

<activity

         ...

            <!--要想在別的App上能成功調起App，必須添加intent過濾器-->
            <intent-filter>
                <!--協議部分，隨便設置-->
                <data
                    android:host="host"
                    android:path="/pageDetail"
                    android:port="8088"//能夠不要
                    android:scheme="stars"/>
                <!--下面這幾行也必須得設置-->
                <!--表示該頁面能夠被隱式調用，必須加上該項-->
                <category android:name="android.intent.category.DEFAULT"/>
                <action android:name="android.intent.action.VIEW"/>
                <!--若是但願該應用能夠經過瀏覽器的鏈接啓動，則添加該項-->
                <category android:name="android.intent.category.BROWSABLE"/>
            </intent-filter>
        </activity>
複製代碼

IOS配置

只須要配置info.plist 文件，只須要配置URL Schemes就能夠了，identifier是可選配置

四、注意事項

正常狀況下，以上配置後，就能夠正常進行跳轉了，可是在安卓上，還須要進行一步配置,若是你的應用被其註冊過的外部 url 調起，若是要在現有的 MainActivity 中監聽傳入的 intent，那麼須要在AndroidManifest.xml中將 MainActivity 的launchMode設置爲singleTask

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">
複製代碼