react-native-hyperlinkを使ってみる

これはなに?

以下のライブラリを使ってみたのでメモ

https://github.com/obipawan/react-native-hyperlink

何をするライブラリ?

テキストに含まれるURLをハイパーリンク化する。

上記GitHubのREADMEでデモの様子が動画で示されている。

使用方法は簡潔で、Text要素をHyperlink要素でラップするだけ。

export const defaultLink = () =>
  <Hyperlink linkDefault={ true }>
    <Text style={ { fontSize: 15 } }>
      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
    </Text>
  </Hyperlink>

使用上の注意点

対象はText要素のみであり、コンポーネントの名前が他のものであった場合には適用できない。

このため、ハイパーリンク化したいコンポーネントが自作コンポーネントなどText以外のものである場合は、要検討。
URLの抽出処理を自前で実装する方が綺麗になる可能性がある。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.