الفرق بين المراجعتين لصفحة: «ReactNative/clipboard»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
||
سطر 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> | ||
الحصول على محتوى نصيّ، يُعيد هذا التابع وعدًا | الحصول على محتوى نصيّ، يُعيد هذا التابع وعدًا <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]] |
مراجعة 14:50، 4 أكتوبر 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 ذلك.