MENU

React NativeのTips2種 パラメーター付きSNSリンクの作成とコンポーネントの再マウント

2022-11-07

SNS link in React Native and Component remounting.

SNSリンクの設置

React NativeアプリにSNSリンクを設置する機会がありました。

アプリ内のFacebookボタン、Twitterボタン、LINEボタンをタップすると、それぞれのSNSの投稿画面を開きつつ投稿内容にアプリから渡されたURLがあらかじめ書かれているタイプです。

snsシェアボタン urlでググるとたくさん出てきます。

img1

紹介されてるコードだとパラメーター付きURLには対応していないのでひと手間かける必要があります。

パラメーター付きURLを渡す場合は以下のようにします。

// websiteUrlはパラメーター付きURL

const onTwitter = () => {
  const link = encodeURIComponent(websiteUrl)
  const url = `https://twitter.com/intent/tweet?text=${link}`
  Linking.openURL(url)
}

const onFacebook = () => {
  const link = encodeURIComponent(websiteUrl)
  const url = `https://www.facebook.com/sharer/sharer.php?u=${link}`;
  Linking.openURL(url)
}

const onLine = () => {
  const url = `http://line.me/R/msg/text/?${websiteUrl}`
  Linking.openURL(url)
}

パラメーター付きURLをencodeURIComponentを使ってエンコードしてからLinking.openURLに渡してあげます。

コンポーネントを再マウントする方法

最近作ったアプリで、ユーザー操作によってコンポーネントを再マウントできるようにする必要がありました。

具体的には、一つの操作でウェブAPIを複数回叩く必要があり、最初のリクエストから処理が完了するまで約10秒以上のローディングが発生する場面がありました。ローディング中はユーザー操作を受け付けなくなります。

そこで、ローディング画面に中止ボタンを置いて再びユーザー操作を受け付けられるようにする実装が必要でした。

APIリクエストをキャンセルする処理を入れても実装可能かとは思いますが、単純にリクエスト中のコンポーネントを再マウントできるようにすることでも実装できます。

コンポーネントにkeyを設定しておいて、keyを変更することで新しいコンポーネントとして再マウントできます。

import React, { useContext, useEffect, useState } from 'react'
import Main from './Main'

export default function Home() {
  const [parentKey, setParentKey] = useState(0)

  const incrementKey = () => {
    setParentKey(prev => prev + 1)
  }

  return (
    <Main
      key={parentKey}
      incrementKey={incrementKey}
    />
  )
}

<Main/>コンポーネントの中でincrementKeyを実行することでコンポーネントが再マウントされ、<Main/>コンポーネントが初期状態(ローディング開始前)に戻ります。

私の場合は<Main/>コンポーネント内の中止ボタンタップ時にincrementKeyを実行することでローディングをキャンセルする処理を実装しました。

この記事を共有