الفرق بين المراجعتين لصفحة: «ReactNative/clipboard»

من موسوعة حسوب
لا ملخص تعديل
طلا ملخص تعديل
 
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: Clipboard في React Native}}</noinclude>
<noinclude>{{DISPLAYTITLE:الواجهة Clipboard في React Native}}</noinclude><blockquote>'''مهملة''': استعمل إحدى [https://reactnative.directory/?search=clipboard الحزم من المجتمع] بدلًا عنها.</blockquote>توفر <code>Clipboard</code> واجهةً لتعيين المحتوى والحصول عليه من الحافظة على كل من Android و iOS.
توفر <code>Clipboard</code> واجهةً لتعيين المحتوى والحصول عليه من الحافظة على كل من Android و iOS.
 
== مثال ==
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/clipboard-api-example تجربة حية]):<syntaxhighlight lang="js">
 
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
</syntaxhighlight>


==التوابع==
==التوابع==
سطر 7: سطر 56:
static getString()
static getString()
</syntaxhighlight>
</syntaxhighlight>
الحصول على محتوى نصيّ، يُعيد هذا التابع وعدًا (‎‎<code>Promise</code>‎‎)، يمكنك استخدام الشيفرة التالية للحصول على محتوى الحافظة:
الحصول على محتوى نصيّ، يُعيد هذا التابع وعدًا ‎‎<nowiki/>[[JavaScript/Promise|<code>Promise</code>‎‎]]، يمكنك استخدام الشيفرة التالية للحصول على محتوى الحافظة:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
async _getContent() {
async _getContent() {
سطر 24: سطر 73:
</syntaxhighlight>
</syntaxhighlight>
المعامل ‎‎<code>content</code>‎‎ يُمثِّل المحتوى الذي سيُخزَّن في الحافظة.
المعامل ‎‎<code>content</code>‎‎ يُمثِّل المحتوى الذي سيُخزَّن في الحافظة.
'''ملاحظة''': احذر عندما تحاول النسخ إلى الحافظة عندما تنسخ بيانات غير نصية أو عددية إذ قد تحتاج بعض المعالج معالجةً قبل أن تصبح مقرؤة، مثل أن تنسخ مصفوفة من البيانات، فعندها سترمي منصة Android خطأ بينما لن تفعل منصة iOS ذلك.


== مصادر ==
== مصادر ==
* [https://facebook.github.io/react-native/docs/clipboard صفحة Clipboard في توثيق React Native الرسمي.]
* [https://facebook.github.io/react-native/docs/clipboard صفحة Clipboard في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]

المراجعة الحالية بتاريخ 15:16، 9 أكتوبر 2021

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

توفر 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 ذلك.

مصادر