Reagieren Sie nativ mit WebView und Deep Links ⇐ Android

[Anonymous]

Ich entwickle jetzt die React Native-App mit WebView. Ich habe einige Links aus E-Mails, die zu meiner Website führen können. In diesem Fall möchte ich meine installierte App öffnen und die WebView mit diesem Link aus der E-Mail öffnen.
Bei mir funktioniert es ganz gut, wenn ich das Linking.addEventListener('url', ({url}) => ...)-Abonnement verwende.
Das Problem ist, wenn ich versuche, denselben Link erneut zu öffnen, navigiert er einfach nicht dorthin. Ich muss Link B öffnen, wenn ich Link A erneut öffnen möchte. Es sieht nach einem Cache-Problem aus. Oder einfach eine Sache mit der Statusaktualisierung reagieren. Die URL ist dieselbe, sodass die Komponente (vielleicht) nichts neu rendert. Ich habe versucht, zusätzlich eine Schlüsselstütze zu verwenden, um sicherzustellen, dass WebView bei Schlüsseländerungen neu gerendert wird. Auch damit kein Glück.
Kann jemand einen Workaround dafür vorschlagen? Handelt es sich um ein bekanntes Problem?
Ich habe viele Lösungen ausprobiert, aber die Sache ist, dass der Handshake nur in der Produktion funktioniert, also muss ich eine neue Version hochladen und einige Zeit warten, bis sie auf dem Markt erscheint.
Mein Code ist super einfach:

Code: Select all

  ...

const [initialUrl, setInitialUrl] = useState(null)

...

const handleNavigationStateChange = (navState: any) => {
setCanGoBack(navState.canGoBack)
}

const handleShouldStartLoadWithRequest = (navState: any) => {
if (navState.url && !navState.url.startsWith(targetUrl)) {
if (navState.url.match(/^(https?|mailto|tel|sms|geo):/i)) {
Linking.openURL(navState.url).then()
return false
}
}

return true
}

...

useEffect(() => {
let finalUrl = `${targetUrl}/auth/login`

const checkAndSetUrl = async () => {
const initialLink = await Linking.getInitialURL()

if (initialLink) {
finalUrl = initialLink

console.log('App opened with Deep Link URL:', initialLink)
} else {
try {
const value = await AsyncStorage.getItem(FIRST_LOAD_KEY)

if (value === null) {
finalUrl = `${targetUrl}/auth/start` // Onboarding
await AsyncStorage.setItem(FIRST_LOAD_KEY, 'false')
}
} catch (e) {
console.error('Failed to read/save data:', e)
}
}

setInitialUrl(finalUrl)
}

checkAndSetUrl()

const subscription = Linking.addEventListener('url', ({ url }) => {
setInitialUrl(url)
})

return () => {
subscription.remove()
}
}, [targetUrl])

...

return (



)

Ich erwarte, dass die URL jedes Mal funktioniert, nicht nur beim ersten Mal. Es sollte zum angegebenen Speicherort navigieren, nachdem ich erneut auf den Link geklickt habe.
UPDATE
Ich habe den Fix selbst gefunden. Es war in der Tat das Problem des Reaktionszustands. Ich habe den Zeitstempelparameter zur URL hinzugefügt, bevor ich ihn im Handler festgelegt habe, und es funktioniert jetzt jedes Mal.

Code: Select all

const subscription = Linking.addEventListener('url', ({ url }) => {
const separator = url.includes('?') ? '&' : '?'
const newUrl = `${url}${separator}t=${Date.now()}`

setInitialUrl(newUrl)
})