Hướng dẫn điều hướng sang ứng dụng Xense AR từ app bên thứ 3
- Install module
react-native-app-linkvàreact-native-webview
npm install react-native-app-link
npm install react-native-webview- Tạo một components
ARWebViewcó 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;
- 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;