Wie zeige ich einen Hyperlink in einer React Native-App an?
z.B
<a href="https://google.com>Google</a>
javascript
react-native
Will Chu
quelle
quelle
Antworten:
Etwas wie das:
Verwenden des
Linking
Moduls, das im Lieferumfang von React Native enthalten ist.quelle
this.props.url
anstelle von'http://google.com'
(keine Klammern erforderlich)import { Linking } from 'react-native';
in deinem Dokument?<Text>Some paragraph <Text onPress=...>with a link</Text> inside</Text>
Die ausgewählte Antwort bezieht sich nur auf iOS. Für beide Plattformen können Sie die folgende Komponente verwenden:
quelle
Zu diesem Zweck würde ich dringend in Betracht ziehen, eine
Text
Komponente in a zu verpackenTouchableOpacity
. Wenn aTouchableOpacity
berührt wird, verblasst es (wird weniger undurchsichtig). Dies gibt dem Benutzer sofortiges Feedback beim Berühren des Textes und sorgt für eine verbesserte Benutzererfahrung.Sie können die
onPress
Eigenschaft auf dem verwendenTouchableOpacity
, um den Link zu erstellen:quelle
React Native-Dokumentation schlägt vor, Folgendes zu verwenden
Linking
:Referenz
Hier ist ein sehr grundlegender Anwendungsfall:
Sie können entweder die Funktions- oder die Klassenkomponenten-Notation verwenden, je nach Wahl des Händlers.
quelle
Verwenden Sie React Native Hyperlink (Native
<A>
Tag):Installieren:
importieren:
Verwendung:
<A>Example.com</A>
<A href="example.com">Example</A>
<A href="https://example.com">Example</A>
<A href="example.com" style={{fontWeight: 'bold'}}>Example</A>
quelle
Ein weiterer hilfreicher Hinweis zu den obigen Antworten ist das Hinzufügen eines Flexbox-Stils. Dadurch bleibt der Text in einer Zeile und es wird sichergestellt, dass der Text den Bildschirm nicht überlappt.
quelle
Für den React Native gibt es eine Bibliothek zum Öffnen von Hyperlinks in der App. https://www.npmjs.com/package/react-native-hyperlink
Darüber hinaus müssen Sie wahrscheinlich die URL überprüfen und der beste Ansatz ist Regex. https://www.npmjs.com/package/url-regex
quelle
Wenn Sie Links und andere Arten von Rich Text erstellen möchten, ist die Verwendung von React Native HTMLView eine umfassendere Lösung .
quelle
Ich dachte nur, ich würde meine hackige Lösung mit jedem teilen, der dieses Problem jetzt entdeckt eingebetteten Links in einer Zeichenfolge entdeckt. Es wird versucht, die Links zu inline indem es dynamisch mit der jeweils eingegebenen Zeichenfolge gerendert wird.
Bitte zögern Sie nicht, es an Ihre Bedürfnisse anzupassen. Es funktioniert für unsere Zwecke als solche:
Dies ist ein Beispiel dafür, wie https://google.com angezeigt wird.
Sehen Sie es auf Gist:
https://gist.github.com/Friendly-Robot/b4fa8501238b1118caaa908b08eb49e2
quelle
Import Verknüpfen des Moduls mit React Native
Versuch es:-
quelle