【React Native】クリップボードを扱う方法｜expo-clipboardの例

今回は、React Nativeで開発しているアプリで、Expo SDKのexpo-clipboard を利用してクリップボードを扱う例となります。

【React Native】expo-clipboardでクリップボードを扱う方法

例では、以下の画面を作成し、画面上でクリップボードを扱う簡単な処理を実行できるようにします。

上記の画面では、1行目のテキスト部分をタップすると「hello world」の文字列をコピーし、2行目のテキスト部分をタップすると以下のようにクリップボード内のテキストを表示します。

実際の挙動は以下のExpo Snackで確認できます。

https://snack.expo.io/@yic666kr/react-native-expo-clipboard-sample

例では、ExpoでReactNativeの開発環境を構築してある前提としています。Expoで開発環境を構築する方法については以下のリンク先を参考にしてみてください。

【React Native】Expoで開発環境を構築し新規プロジェクトを作成する方法

expo-clipboardをインストール

まず、プロジェクトに以下のコマンドでexpo-clipboardをインストールします。

expo install expo-clipboard

クリップボードを扱うコードの例

以下、クリップボードを扱うコードの例となり、App.jsファイルに記述します。

import React, { useState } from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'

import Clipboard from 'expo-clipboard'


const App = () => {
  const [copiedText, setCopiedText] = useState('')

  const setClip = (setText) => {
    Clipboard.setString(setText)
  }

  const getClip = async () => {
    const text = await Clipboard.getStringAsync();
    setCopiedText(text);
  }

  const sampleText = 'hello world'

  return (
    <View style={styles.container}>
      <Pressable
       onPress={() => setClip(sampleText)}
       style={styles.item} 
      >
        <Text style={styles.text}>タップすると「{sampleText}」をコピー</Text>
      </Pressable>

      <Pressable 
        onPress={() => getClip()} 
        style={styles.item} 
      >
        <Text style={styles.text}>タップするとコピーしたテキストを表示</Text>
      </Pressable>

      <Text style={styles.copiedText}>{copiedText}</Text>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  item: {
    padding:  10,
  },

  text: {
    fontSize: 14,
  },
    
  copiedText: {
    fontSize: 20,
    color: 'red'
  },
})


export default App

React Nativeのコードの説明

以下、React Nativeのコードのポイントとなる箇所の説明となります。

モジュールからインポート

コードの1行目からの箇所では、次のようにモジュールから利用するコンポーネントなどをインポートしています。

import React, { useState } from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'

import Clipboard from 'expo-clipboard'

クリップボードを扱うためのstate・関数を定義

コードの8行目からの箇所では、App関数内で次のstateと関数を定義しています。

• コピーしたテキストを保存するstate
• クリップボードに文字列をセットする関数setClip
• クリップボードの文字列を取得する関数getClip

  const [copiedText, setCopiedText] = useState('')

  const setClip = (setText) => {
    Clipboard.setString(setText)
  }

  const getClip = async () => {
    const text = await Clipboard.getStringAsync();
    setCopiedText(text);
  }

上記で利用しているクリップボードを扱うClipboardのメソッドは以下となります。

Clipboard.setString()が引数に指定した文字列を、クリップボードに保存するメソッドとなります。

Clipboard.getStringAsync()がクリップボードの内容を取得するメソッドとなります。また、戻り値はPromiseとなります。

例では、取得したクリップボードの内容を定義したstateに保存しています。

画面のレンダリング

コードの19行目からの箇所では、App関数内で次のように、コピーするテキストの定義とレンダリングを返しています。

画面内では、クリップボードを扱う以下の処理を行えます。

• 1行目のテキストをタップすると、関数のsetClipを実行して、「hello world」の文字列をコピー。
• 2行目のテキストをタップすると、関数のgetClipを実行して、画面にクリップボード内のテキストを表示。

  const sampleText = 'hello world'

  return (
    <View style={styles.container}>
      <Pressable
       onPress={() => setClip(sampleText)}
       style={styles.item} 
      >
        <Text style={styles.text}>タップすると「{sampleText}」をコピー</Text>
      </Pressable>

      <Pressable 
        onPress={() => getClip()} 
        style={styles.item} 
      >
        <Text style={styles.text}>タップするとコピーしたテキストを表示</Text>
      </Pressable>

      <Text style={styles.copiedText}>{copiedText}</Text>
    </View>
  )
}