المكون 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‎‎

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

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

‎‎nextFocusDown‎‎

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

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

‎‎nextFocusForward‎‎

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

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

‎‎nextFocusLeft‎‎

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

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

‎‎nextFocusRight‎‎

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

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

‎‎nextFocusUp‎‎

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

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

‎‎testID‎‎

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

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

‎‎touchSoundDisabled‎‎

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

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

مصادر

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