TIL 22.10.18 | Linking API (RN), Web Browser API (Expo), Share API (RN)

1. Linking API

- 개요

• React-Native 의 API 입니다.
• 앱 내에서 앱 링크 수신 및 발신 상호작용 인터페이스를 제공합니다.
• 사용중인 앱에서 다른 앱으로 전환됩니다.

- 간단한 예시

import {Linking} from "react-native";
...(생략)

const openYTLink = async (videoID: string) => {
  const baseUrl = `https://m.youtube.com/watch?v=${videoID}`;
  await Linking.openURL(baseUrl);
};

...(생략)

참조: React Native, 노마드코더

2. Web Browser API

- 개요

• Expo 의 API 입니다.
• 앱 내에서 시스템의 웹 브라우저에 대한 엑세스를 및 리디렉션 처리를 제공합니다.
• 사용중인 앱에서 다른 앱으로 전환 안됩니다.

- 간단한 예시

import * as WebBrowser from "expo-web-browser";
...(생략)

const openYTLink = async (videoID: string) => {
  const baseUrl = `https://m.youtube.com/watch?v=${videoID}`;
  await WebBrowser.openBrowserAsync(baseUrl);
};

...(생략)

참조: Expo, 노마드코더

3. Share API

- 개요

• React-Native 의 API 입니다.
• 앱의 공유 기능을 제공합니다.
• 근데 IOS 는 URL 만, Android 는 Title 만 공유 가능합니다.
  
  • 그래서 써드파티 패키지를 써야할 것 같습니다. (react-native-share 등)
  • 혹은 각각 플랫폼에 맞는 속성들에 정보를 나눠서 보내줍니다.

- 간단한 예시

import { Share, Platform, useColorScheme } from "react-native";
...(생략)

const isDark = useColorScheme() === "dark";

const shareMedia = async () => {
  const isAndroid = Platform.OS === "android";
  const homepage = isMovie
    ? `https://www.imdb.com/title/${data?.imdb_id}`
    : data?.hompage;
  if (isAndroid) {
    await Share.share({
      message: `${params.overview}\nCheck it out:${homepage}`,
      title: isMovie ? params.original_title : params.original_name,
    });
  } else {
    await Share.share({
      message: isMovie ? params.original_title : params.original_name,
      url: homepage,
    });
  }
};

...(생략)

참조: React Native, 노마드코더