الفرق بين المراجعتين ل"ReactNative/settings"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
(8 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 +
<noinclude>{{DISPLAYTITLE:الواجهة settings في React Native}}</noinclude>
 +
تعمل الواجهة <code>Settings</code> كمُغلِّف للواجهة [https://developer.apple.com/documentation/foundation/nsuserdefaults NSUserDefaults]، وهي مخزنٌ دائمٌ لقيمة المفتاح (key-value) المتوفّر على منصّة iOS فقط.
  
= Settings =
+
__toc__
تعمل <code>Settings</code> كمُغلِّف للواجهة [https://developer.apple.com/documentation/foundation/nsuserdefaults NSUserDefaults]، وهي مخزنٌ دائمٌ لقيمة المفتاح (key-value) المتوفّر على منصّة iOS فقط.
 
  
== مثالٌ ==
+
== مثال ==
<syntaxhighlight lang="javascript">
+
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/settings-example تجربة حية]):<syntaxhighlight lang="javascript">
 
import React, { useState } from "react";
 
import React, { useState } from "react";
 
import { Button, Settings, StyleSheet, Text, View } from "react-native";
 
import { Button, Settings, StyleSheet, Text, View } from "react-native";
سطر 52: سطر 53:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static clearWatch(watchId: number)
 
static clearWatch(watchId: number)
</syntaxhighlight>يُعيد هذا التابع الرقم <code>watchId</code> عندما يهيّأ الاشتراك بشكلٍ اعتياديٍّ.
+
</syntaxhighlight>يُعيد هذا التابع الرقم <code>watchId</code> عندما يهيّأ الاشتراك اعتياديًّا.
  
 
=== <code>get()‎</code> ===
 
=== <code>get()‎</code> ===
سطر 62: سطر 63:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static set(settings: object)
 
static set(settings: object)
</syntaxhighlight>لوضع قيمةٍ أو أكثر في <code>NSUserDefaults</code>.
+
</syntaxhighlight>لوضع قيمةٍ، أو أكثر في <code>NSUserDefaults</code>.
  
 
=== <code>watchKeys()‎</code> ===
 
=== <code>watchKeys()‎</code> ===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static watchKeys(keys: string | array<string>, callback: function): number
 
static watchKeys(keys: string | array<string>, callback: function): number
</syntaxhighlight>للإعلام عن الاشتراك وذلك عند تغيُّر قيمة أيّ مفتاحٍ محدّد بالمعامل <code>key</code> في <code>NSUserDefaults</code>. ويُعيد الرقم <code>watchId</code> الذي يُستخدم مع الدّالة <code>clearWatch()</code> لإلغاء الاشتراك.
+
</syntaxhighlight>للإعلام عن الاشتراك، وذلك عند تغيُّر قيمة أيّ مفتاحٍ محدّد بالمعامل <code>key</code> في <code>NSUserDefaults</code>. ويُعيد العدد <code>watchId</code> الذي يُستخدم مع الدّالة ‎‏‪.<code>clearWatch()</code> لإلغاء الاشتراك
 
 
'''ملاحظة:''' إن التابع <code>watchKeys()‎</code> يتجاهل في تصميمه طلبات <code>set()‎</code> الداخلية، ويستجيب  للتّغيرات التي تنشأ خارج شفرة React Native فقط.<blockquote>'''ملاحظة:''' إن التابع <code>watchKeys()‎</code> يتجاهل في تصميمه طلبات <code>set()‎</code> الداخلية، ويستجيب للتّغيرات التي تنشأ خارج شفرة React Native فقط.</blockquote>
 
  
 +
'''ملاحظة:''' إنّ التابع <code>watchKeys()‎</code> يتجاهل في تصميمه طلبات <code>set()‎</code> الداخلية، ويستجيب للتّغيرات التي تنشأ خارج شفرة [[ReactNative|React Native]] فقط.
 
== مصادر ==
 
== مصادر ==
  
 
* [https://facebook.github.io/react-native/docs/settings صفحة Settings في توثيق React Native الرسميّ]
 
* [https://facebook.github.io/react-native/docs/settings صفحة Settings في توثيق React Native الرسميّ]
 +
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native API]]

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

تعمل الواجهة Settings كمُغلِّف للواجهة NSUserDefaults، وهي مخزنٌ دائمٌ لقيمة المفتاح (key-value) المتوفّر على منصّة iOS فقط.

مثال

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

import React, { useState } from "react";
import { Button, Settings, StyleSheet, Text, View } from "react-native";

const App = () => {
  const [data, setData] = useState(Settings.get("data"));

  const storeData = data => {
    Settings.set(data);
    setData(Settings.get("data"));
  };

  return (
    <View style={styles.container}>
      <Text>Stored value:</Text>
      <Text style={styles.value}>{data}</Text>
      <Button
        onPress={() => storeData({ data: "React" })}
        title="Store 'React'"
      />
      <Button
        onPress={() => storeData({ data: "Native" })}
        title="Store 'Native'"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  value: {
    fontSize: 24,
    marginVertical: 12
  }
});

export default App;

التوابع

clearWatch()‎

static clearWatch(watchId: number)

يُعيد هذا التابع الرقم watchId عندما يهيّأ الاشتراك اعتياديًّا.

get()‎

static get(key: string): mixed

للحصول على القيمة الحاليّة للمفتاح المعطى key في NSUserDefaults.

set()‎

static set(settings: object)

لوضع قيمةٍ، أو أكثر في NSUserDefaults.

watchKeys()‎

static watchKeys(keys: string | array<string>, callback: function): number

للإعلام عن الاشتراك، وذلك عند تغيُّر قيمة أيّ مفتاحٍ محدّد بالمعامل key في NSUserDefaults. ويُعيد العدد watchId الذي يُستخدم مع الدّالة ‎‏‪.clearWatch() لإلغاء الاشتراك

ملاحظة: إنّ التابع watchKeys()‎ يتجاهل في تصميمه طلبات set()‎ الداخلية، ويستجيب للتّغيرات التي تنشأ خارج شفرة React Native فقط.

مصادر