React Native Linking與 Android原生頁面路由跳轉問題

ReactNative 安卓開發 · 發表 2019-02-21 00:04:08

摘要： Linking 喚起APP. 檢查該app能否被喚起，也就是檢查該app是否已安裝成功； Linking提供了canOpenURL(url: string): Promise<boolean>;這個方法，用來檢測某個url是否...

Linking 喚起APP.

檢查該app能否被喚起，也就是檢查該app是否已安裝成功；
Linking提供了canOpenURL(url: string): Promise<boolean>;這個方法，用來檢測某個url是否可以開啟;
```
Linking.canOpenURL('appscheme://').then(canopen => {
...
})
```

喚起並傳遞引數。
使用Linking開啟app呼叫openURL方法即可：
Linking.openURL('appscheme://apphost/path?params=xxx')
完整呼叫方法如下：

Linking.canOpenURL('appscheme://').then(canopen => {
if (canopen) {
console.warn('可以開啟: appscheme');
Linking.openURL('appscheme://apphost/path?rn=true')
} else {
console.warn('未安裝: appscheme');
}
})

備註： Android人員應該知道上述開啟的路由appscheme://apphost/path?rn=true 哪裡來的，非Android應該不太清楚，其實這裡的路由是我們在Android專案中的AndroidManifest.xml 檔案中設定的，如下：

<activity android:name=".RNPreloadActivity"
android:launchMode="singleTask">
<intent-filter>
<data
android:host="apphost"
android:scheme="appscheme"/>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
 </activity>

APP中喚起RN頁面的Activity，並將路由資訊通過linking傳遞到對應的js中。

APP中跳轉載入RN的頁面。

Intent intent1 = new Intent(Intent.ACTION_VIEW, Uri.parse("appscheme://apphost/path?params=xxx"));
startActivity(intent1);

RN頁面渲染的js檔案中如何獲取跳轉路由。

Linking.getInitialURL().then((url) => {
if (url) {
console.warn('捕捉的URL地址為: ' + url);
}else{
console.warn('捕獲得的url為空');
}
}).catch(err => console.error('錯誤資訊為:', err));

在js中監聽APP的執行狀態。

AppState.addEventListener('change',(appState)=>{
if(appState=='active'){
Linking.getInitialURL().then(url=>{
console.warn('stateChange url: ' + url);
})
}
})

監聽的字串以及狀態如下：

export type AppStateEvent = "change" | "memoryWarning";
export type AppStateStatus = "active" | "background" | "inactive";

React Native Linking與 Android原生頁面路由跳轉問題

您可能也會喜歡…