عرض مصدر ReactNative/button

<noinclude>{{DISPLAYTITLE: Button في React Native}}</noinclude>

مكون زر أساسي من المتوقَّع أن يُصيَّر بشكل جيّد على أية منصة. يُمكن تخصيصُه قليلًا.

إذا لم يكن هذا الزر مناسبًا لتطبيقك، فيمكنك إنشاء زرّك باستخدام [[ReactNative/touchableopacity|‎‎<code>TouchableOpacity</code>‎‎]] أو <code>[[ReactNative/touchablenativefeedback|TouchableNativeFeedback]]</code>. لفكرةٍ عن كيفيّة ذلك، انظر إلى [https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js الشيفرة المصدرية لمكون الزر هذا]. أو ألق نظرة على [https://js.coach/react-native?search=button مجموعة واسعة من مكونات زر] مبنيّة من طرف المجتمع.<syntaxhighlight lang="javascript">
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>
</syntaxhighlight>

==مثال==
<syntaxhighlight lang="javascript">
import React from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';

const Separator = () => (
  <View style={styles.separator} />
);

const App = () => (
  <SafeAreaView style={styles.container}>
    <View>
      <Text style={styles.title}>
        The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
      </Text>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
      </Text>
      <Button
        title="Press me"
        color="#f194ff"
        onPress={() => Alert.alert('Button with adjusted color pressed')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        All interaction for the component are disabled.
      </Text>
      <Button
        title="Press me"
        disabled
        onPress={() => Alert.alert('Cannot press this one')}
      />
    </View>
    <Separator />
    <View>
      <Text style={styles.title}>
        This layout strategy lets the title define the width of the button.
      </Text>
      <View style={styles.fixToText}>
        <Button
          title="Left button"
          onPress={() => Alert.alert('Left button pressed')}
        />
        <Button
          title="Right button"
          onPress={() => Alert.alert('Right button pressed')}
        />
      </View>
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;
</syntaxhighlight>

== الخاصيات ==

===‎‎<code>onPress</code>‎‎===
معالج يستدعى عند نقر المستخدم على الزّر.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة function([https://reactnative.dev/docs/pressevent PressEvent])
|نعم
|}

===‎‎<code>title</code>‎‎===
نص لعرضه داخل الزر.
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|نعم
|}

===‎‎<code>accessibilityLabel</code>‎‎===
نص لعرضه لميّزات إمكانية الوصول الخاصّة بالعمى (blindness accessibility).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}

===‎‎<code>color</code>‎‎===
لون النص (iOS)، أو لون خلفية الزر (Android).
{| class="wikitable"
!النوع
!مطلوب
!القيمة الافتراضية
|-
|لون
|لا
|`'#2196F3'`  في Android  
'#007AFF'   في iOS
|}

===‎‎<code>disabled</code>‎‎===
إذا كان ذا القيمة ‎‎<code>true</code>‎‎، فستُعطَّل جميع التفاعلات مع هذا المكوّن.
{| class="wikitable"
!النوع
!مطلوب
!القيمة الافتراضية
|-
|قيمة منطقيّة
|لا
|false
|}

===‎‎<code>hasTVPreferredFocus</code>‎‎===
(Apple TV فقط) التركيز المفضَّل في التلفاز (انظر توثيق المُكون <code>[[ReactNative/view|View]]</code>).
{| class="wikitable"
!النوع
!مطلوب
!المنصة
!القيمة الافتراضية
|-
|قيمة منطقيّة
|لا
|iOS
|false
|}

===‎‎<code>nextFocusDown</code>‎‎===
يُعيِّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم للأسفل. راجع [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown توثيق Android].

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد
|لا
|Android
|}

===‎‎<code>nextFocusForward</code>‎‎===
يعيّن العرض التالي لتلقي التركيز عندما يتنقل المستخدم للأمام. راجع [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward توثيق Android].
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد
|لا
|Android
|}

===‎‎<code>nextFocusLeft</code>‎‎===
يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم إلى اليسار. راجع [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft توثيق Android].
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد
|لا
|Android
|}

===‎‎<code>nextFocusRight</code>‎‎===
يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم إلى اليمين. راجع [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight توثيق Android].
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد
|لا
|Android
|}
===‎‎<code>nextFocusUp</code>‎‎===
يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم لأعلى. راجع [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp توثيق Android].
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد
|لا
|Android
|}
‎‎<code>testID</code>‎‎

يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}

===‎‎<code>touchSoundDisabled</code>‎‎===
إذا كان ذا القيمة ‎‎<code>true</code>‎‎، فلا يتم تشغيل صوت النظام عند اللمس.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
!القيمة الافتراضية
|-
|قيمة منطقية
|لا
|Android
|false
|}

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