الواجهة Clipboard في React Native

مهملة: استعمل إحدى الحزم من المجتمع بدلًا عنها.

توفر Clipboard واجهةً لتعيين المحتوى والحصول عليه من الحافظة على كل من Android و iOS.

مثال

إليك المثال التالي (تجربة حية):

import React, { useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, Clipboard, StyleSheet } from 'react-native'

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

  const copyToClipboard = () => {
    Clipboard.setString('hello world')
  }

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString()
    setCopiedText(text)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={() => copyToClipboard()}>
          <Text>Click here to copy to Clipboard</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => fetchCopiedText()}>
          <Text>View copied text</Text>
        </TouchableOpacity>

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

    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  copiedText: {
    marginTop: 10,
    color: 'red'
  }
})

export default App

التوابع

‎‎getString()‎‎

static getString()

الحصول على محتوى نصيّ، يُعيد هذا التابع وعدًا ‎‎Promise‎‎، يمكنك استخدام الشيفرة التالية للحصول على محتوى الحافظة:

async _getContent() {
  var content = await Clipboard.getString();
}

‎‎setString()‎‎

static setString(content)

تعيين محتوى نصيّ ليُحفَظ. يمكنك استخدام الشيفرة التالية لتعيين محتوى الحافظة:

_setContent() {
  Clipboard.setString('hello world');
}

المعامل ‎‎content‎‎ يُمثِّل المحتوى الذي سيُخزَّن في الحافظة.

ملاحظة: احذر عندما تحاول النسخ إلى الحافظة عندما تنسخ بيانات غير نصية أو عددية إذ قد تحتاج بعض المعالج معالجةً قبل أن تصبح مقرؤة، مثل أن تنسخ مصفوفة من البيانات، فعندها سترمي منصة Android خطأ بينما لن تفعل منصة iOS ذلك.

مصادر

• صفحة Clipboard في توثيق React Native الرسمي.