React Native 앱(웹 포함)에서 공유하는 방법

React Native의 웹 지원은 특히 Expo를 사용하는 경우 계속해서 개선되고 있습니다. Expo를 사용하면 바로 사용할 수 있습니다.

그러나 지원되는 다른 플랫폼을 앱에 추가하면 복잡성이 더해집니다! 지원되는 각 플랫폼에서 작동하는지 확인해야 합니다.

최근에 저는 building a game with React Native , Match the Pairs를 통해 사용자가 게임을 이기기 위해 몇 번의 이동을 했는지 공유할 수 있었습니다.

iOS, Android 및 웹에서 실행됩니다. React NativeShare API는 iOS 및 Android에서 작동하지만 웹에서는 작동하지 않으므로 이를 처리할 솔루션을 찾아야 했습니다.

오늘은 실행되는 플랫폼에 따라 기능이 다른 함수를 빌드하는 방법을 다룰 것입니다.

shareGame 함수

먼저 사용자가 앱에서 "게임 공유"를 누를 때 호출되는 함수를 만듭니다.

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {}

입력 예:

shareGame({
  emojis: [
    "🏄",
    "💣",
    "📬",
    "😇",
    "🤠",
    "🦦",
    "📸",
    "📬",
    "🤠",
    "🏄",
    "🌮",
    "🌮",
    "💣",
    "😇",
    "🦦",
    "📸",
  ],
  moveCount: 16,
})

공유 API

먼저 React Native의 Share API을 활용할 수 있습니다.

import { Share } from "react-native"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const message = "This is an example message"

  return await Share.share({
    message,
  })
}

iOS 및 Android에서는 잘 작동하지만 웹에서는 지원되지 않는다는 오류가 발생합니다.

플랫폼 API 활용

그렇다면 플랫폼 간의 서로 다른 API 지원에 대해 무엇을 할 수 있을까요?

코어Platform API를 활용하여 지정된 플랫폼에서 기능을 변경할 수 있습니다.

import { Share, Platform } from "react-native"
import * as Clipboard from "expo-clipboard"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const message = "This is an example message"

  if (Platform.OS === "web") {
    await Clipboard.setStringAsync(message)

    alert(`The following message was copied to your clipboard.\n\n${message}`)
    return
  }

  return await Share.share({
    message,
  })
}

위에서 플랫폼이 "웹"인 경우 ( expo-clipboard 또는 react-native-clipboard 을 통해) 메시지를 클립보드에 복사하는 것을 볼 수 있습니다.

또한 alert를 사용하여 메시지를 클립보드에 복사했으며 실제 메시지가 무엇인지 사용자에게 알립니다. 사용자 지정 모달은 여기에서 훨씬 더 나은 솔루션이 될 것입니다.

플랫폼이 "웹"이 아닌 경우 계속해서 Share API를 사용합니다.

보너스: 공유 메시지 작성

이 섹션은 이 기사의 내용과 관련이 없지만 추가해야겠다고 생각했습니다. 실제 메시지를 작성해 보겠습니다.

다음과 같이 사용자가 플레이한 이모티콘 그리드를 만들고 싶습니다.

🏄 💣 📬 😇
🤠 🦦 📸 📬
🤠 🏄 🌮 🌮
💣 😇 🦦 📸

그렇게 하기 위해 이모티콘 배열을 4개 이모티콘의 4개 행으로 분할한 다음 새 줄 문자로 결합합니다.

import { Share, Platform } from "react-native"
import * as Clipboard from "expo-clipboard"

type shareGameProps = {
  emojis: string[]
  moveCount: number
}

const buildRow = (emojis: string[], start: number, end: number) =>
  emojis.slice(start, end).join(" ")

export const shareGame = async ({ emojis, moveCount }: shareGameProps) => {
  const row1 = buildRow(emojis, 0, 4)
  const row2 = buildRow(emojis, 4, 8)
  const row3 = buildRow(emojis, 8, 12)
  const row4 = buildRow(emojis, 12, 16)

  const emojiBoard = [row1, row2, row3, row4].join("\n")
  const message = `I just beat Match the pairs in ${moveCount} moves!\n${emojiBoard}`

  if (Platform.OS === "web") {
    await Clipboard.setStringAsync(message)

    alert(`The following message was copied to your clipboard. \n\n${message}`)
    return
  }

  return await Share.share({
    message,
  })
}

그리고 우리는 그것을 가지고 있습니다! 각 플랫폼에서 동일한 API를 지원하지 않는 경우에도 여러 플랫폼에서 작동하는 게임 결과를 공유하는 기능입니다.