今回はReactNativeのClipboardモジュールを使って、テキストのコピーアンドペーストを制御する基本例を紹介する。

モジュールのインポート

まず、react-nativeからClipboardモジュールをインポートする。

import { Clipboard } from 'react-native';

setStringメソッドでコピー

テキストをクリップボードへコピーする場合はsetStringメソッドを使う。

const text = 'Hello';
Clipboard.setString(text);

getStringメソッドでクリップボードの値を取得

逆にクリップボードの値を取得する場合はgetStringメソッドを使う。

async getpb() {
  const text = await Clipboard.getString();
  this.setState({text})
}

サンプルコード

一つの入力フィールドと、二つのボタンを用意したサンプルコードを書いてみた。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Button,
  TextInput,
  Text,
  Clipboard
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      input: "",
      text: "",
    };
  }

  pbcopy() {
    const { input } = this.state;
    Clipboard.setString(input);
  }

  async getpb() {
    const text = await Clipboard.getString();
    this.setState({text});
  }

  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: 'F5FCFF',
      }}>
        <TextInput
          style={{
            width: '100%',
            textAlign: "center",
            borderBottomWidth: 1,
            borderColor: '#ccc',
          }}
          value={this.state.input}
          onChangeText={input => this.setState({input})}
        />
        <Button
          onPress={() => {this.pbcopy()}}
          title="クリップボードにコピーします"
        />

        <Text>{this.state.text}</Text>
        <Button
          onPress={() => {this.getpb()}}
          title="クリップボードのテキストをペーストします"
        />
      </View>
    );
  }
}

Expoでサンプルコードを実行すると、図のようなUIが表示される。

下線を引いた入力フィールドにテキストを入力し、コピーボタンをタップするとクリップボードに入力したテキストがコピーされる。

次にペーストボタンを押してみる。

コピーした「こんにちは」が下の入力フィールドに表示された。