Skip to Content
SDKDeeplink XenseARReact Native

Hướng dẫn điều hướng sang ứng dụng Xense AR từ app bên thứ 3

  1. Install module react-native-app-linkreact-native-webview
npm install react-native-app-link npm install react-native-webview
  1. Tạo một components ARWebView có nội dung sau:
import React from 'react'; import { SafeAreaView } from 'react-native'; import { WebView } from 'react-native-webview'; import AppLink from 'react-native-app-link'; type ARWebViewProps = { uri: string; appStoreId: string; playStoreId: string; appName: string; deeplinkScheme: string; }; const ARWebView: React.FC<ARWebViewProps> = ({ uri, appStoreId, playStoreId, appName, deeplinkScheme, }) => { const openApp = async (url: string) => { try { await AppLink.maybeOpenURL(url, { appName, appStoreId, playStoreId, }); } catch (err) { console.warn('Error opening app or fallback:', err); } }; return ( <SafeAreaView style={{ flex: 1 }}> <WebView source={{ uri }} originWhitelist={['*']} onShouldStartLoadWithRequest={(request) => { const url = request.url; if (url.startsWith(`${deeplinkScheme}://`)) { openApp(url); return false; } return true; }} /> </SafeAreaView> ); }; export default ARWebView;
  1. Sử dụng component ARWebView

Các thông tin của properties do Xense AR cung cấp

import React from 'react'; import { SafeAreaView } from 'react-native'; import ARWebView from './components/ARWebView'; const App = () => { return ( <SafeAreaView style={{ flex: 1 }}> <ARWebView uri="webpage-provided-by-xense" appStoreId="xense-ar-apple-store-id" playStoreId="xense-ar-play-store-id" appName="XenseAR" deeplinkScheme="xensear-deeplink-scheme" /> </SafeAreaView> ); }; export default App;
Last updated on