Button في React Native

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

إذا لم يكن هذا الزر مناسبًا لتطبيقك، فيمكنك إنشاء زرّك باستخدام ‎‎TouchableOpacity‎‎ أو TouchableNativeFeedback. لفكرةٍ عن كيفيّة ذلك، انظر إلى الشيفرة المصدرية لمكون الزر هذا. أو ألق نظرة على مجموعة واسعة من مكونات زر مبنيّة من طرف المجتمع.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

مثال

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;

الخاصيات

‎‎onPress‎‎

معالج يستدعى عند نقر المستخدم على الزّر.

النوع	مطلوب
دالة function(PressEvent)	نعم

‎‎title‎‎

نص لعرضه داخل الزر.

النوع	مطلوب
سلسلة نصيّة	نعم

‎‎accessibilityLabel‎‎

نص لعرضه لميّزات إمكانية الوصول الخاصّة بالعمى (blindness accessibility).

النوع	مطلوب
سلسلة نصيّة	لا

‎‎color‎‎

لون النص (iOS)، أو لون خلفية الزر (Android).

النوع	مطلوب	القيمة الافتراضية
لون	لا	`'#2196F3'` في Android '#007AFF' في iOS

‎‎disabled‎‎

إذا كان ذا القيمة ‎‎true‎‎، فستُعطَّل جميع التفاعلات مع هذا المكوّن.

النوع	مطلوب	القيمة الافتراضية
قيمة منطقيّة	لا	false

‎‎hasTVPreferredFocus‎‎

(Apple TV فقط) التركيز المفضَّل في التلفاز (انظر توثيق المُكون View).

النوع	مطلوب	المنصة	القيمة الافتراضية
قيمة منطقيّة	لا	iOS	false

‎‎nextFocusDown‎‎

يُعيِّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم للأسفل. راجع توثيق Android.

النوع	مطلوب	المنصة
عدد	لا	Android

‎‎nextFocusForward‎‎

يعيّن العرض التالي لتلقي التركيز عندما يتنقل المستخدم للأمام. راجع توثيق Android.

النوع	مطلوب	المنصة
عدد	لا	Android

‎‎nextFocusLeft‎‎

يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم إلى اليسار. راجع توثيق Android.

النوع	مطلوب	المنصة
عدد	لا	Android

‎‎nextFocusRight‎‎

يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم إلى اليمين. راجع توثيق Android.

النوع	مطلوب	المنصة
عدد	لا	Android

‎‎nextFocusUp‎‎

يعيّن العرض التالي لتلقي التركيز عندما ينتقل المستخدم لأعلى. راجع توثيق Android.

النوع	مطلوب	المنصة
عدد	لا	Android

‎‎testID‎‎

يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).

النوع	مطلوب
سلسلة نصيّة	لا

‎‎touchSoundDisabled‎‎

إذا كان ذا القيمة ‎‎true‎‎، فلا يتم تشغيل صوت النظام عند اللمس.

النوع	مطلوب	المنصة	القيمة الافتراضية
قيمة منطقية	لا	Android	false

مصادر

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