【ReactNative】aタグのようなリンクの実装(react-native-hyperlink)

ReactNative
2023.07.01

はじめに

ReactNativeアプリの運用の中で「文章中のURLをリンク化させて外部サイトを開きたい」というご要望を対応したので記録を残します。

react-native-hyperlink

独自実装することも考えましたが、ごちゃごちゃ書きたくなかったのでReactNativeのライブラリでよさそうなものがないかを探してみたら、ありました！実装したいものが出来そうな感じがしたので早速使いました。

参考：https://github.com/obipawan/react-native-hyperlink/tree/bafc4115026961e270a614e4207dc3ea8ea15f57

インストール

yarn add react-native-hyperlink

実装

実装もとっても簡単にできました。

  1. react-native-hyperlinkをimport
  2. ハイパーリンク化したい要素をラップする。
  3. ハイパーリンクのスタイル[linkStyle]を設定
  4. linkDefaultをTRUEで設定

linkDefaultをTRUEで設定することでonPress→Linkingで実装する手間が省けます。

import React from 'react';
import {View, Text} from 'react-native';
import Hyperlink from 'react-native-hyperlink';

const HyperComponent = ({message}) => {

  return (
    <View>
      <View>
        <Hyperlink linkDefault linkStyle={styles.hyperlinkStyle}>
          <Text>{'https://sa-sami.com/blog'}</Text>
          <Text>{'ママさんシステムエンジニアの開発奮闘記'}</Text>
        </Hyperlink>
      </View>
    </View>
  );
};

export default HyperComponent

コメント