الفرق بين المراجعتين لصفحة: «ReactNative/button»

من موسوعة حسوب
مرئينص الويكي
إضافة الصّفحة
 
طلا ملخص تعديل
 
(4 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: Button في React Native}}</noinclude>
<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
إذا لم يكن هذا الزر مناسبًا لتطبيقك، فيمكنك إنشاء زرّك باستخدام ‎‎<code>TouchableOpacity</code>‎‎ أو TouchableNativeFeedback. لفكرةٍ عن كيفيّة ذلك، انظر إلى [https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js الشيفرة المصدرية لمكون الزر هذا]. أو ألق نظرة على [https://js.coach/react-native?search=button مجموعة واسعة من مكونات زر] مبنيّة من طرف المجتمع.
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>
</syntaxhighlight>


==مثال==
==مثال==
<syntaxhighlight lang="javascript">
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/button-example تجربة حية]):<syntaxhighlight lang="javascript">
import React from 'react';
import React from 'react';
import {
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
} from 'react-native';
import Constants from 'expo-constants';


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


export default function App() {
const App = () => (
   return (
   <SafeAreaView style={styles.container}>
    <SafeAreaView style={styles.container}>
    <View>
      <View>
      <Text style={styles.title}>
        <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.
          The title and onPress handler are required. It is recommended to set
      </Text>
          accessibilityLabel to help make your app usable by everyone.
      <Button
         </Text>
         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
         <Button
           title="Press me"
           title="Left button"
           onPress={() => Alert.alert('Simple Button pressed')}
           onPress={() => Alert.alert('Left 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 backgroud color of the button.
        </Text>
         <Button
         <Button
           title="Press me"
           title="Right button"
          color="#f194ff"
           onPress={() => Alert.alert('Right button pressed')}
           onPress={() => Alert.alert('Button with adjusted color pressed')}
         />
         />
       </View>
       </View>
      <Separator />
    </View>
      <View>
  </SafeAreaView>
        <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({
const styles = StyleSheet.create({
   container: {
   container: {
     flex: 1,
     flex: 1,
     marginTop: Constants.statusBarHeight,
     justifyContent: 'center',
     marginHorizontal: 16,
     marginHorizontal: 16,
   },
   },
سطر 99: سطر 92:
   },
   },
});
});
export default App;
</syntaxhighlight>
</syntaxhighlight>


سطر 109: سطر 104:
!مطلوب
!مطلوب
|-
|-
|دالة
|دالة function([https://reactnative.dev/docs/pressevent PressEvent])
|نعم
|نعم
|}
|}
سطر 122: سطر 117:
|نعم
|نعم
|}
|}


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


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


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


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


سطر 188: سطر 179:
|عدد
|عدد
|لا
|لا
|Android
|Android - TV
|}
|}


سطر 200: سطر 191:
|عدد
|عدد
|لا
|لا
|Android
|Android - TV
|}
|}


سطر 212: سطر 203:
|عدد
|عدد
|لا
|لا
|Android
|Android - TV
|}
|}


===‎‎<code>nextFocusRight</code>‎‎===
===‎‎<code>nextFocusRight</code>‎‎===
سطر 225: سطر 215:
|عدد
|عدد
|لا
|لا
|Android
|Android - TV
|}
|}
===‎‎<code>nextFocusUp</code>‎‎===
===‎‎<code>nextFocusUp</code>‎‎===
سطر 237: سطر 227:
|لا
|لا
|Android
|Android
|}
=== ‎‎<code>testID</code>‎‎ ===
يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}
|}


سطر 245: سطر 245:
!مطلوب
!مطلوب
!المنصة
!المنصة
!القيمة الافتراضية
|-
|-
|قيمة منطقية
|قيمة منطقية
|لا
|لا
|Android
|Android
|false
|}
|}


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

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

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

إذا لم يكن هذا الزر مناسبًا لتطبيقك، فيمكنك إنشاء زرّك باستخدام ‎‎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

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/button&oldid=31518»