أساسيات React Native

إطار العمل React Native يشبه React، لكنه يستخدم مكونات أصيلة بدلًا من مكونات الويب كعناصر أساسية. يجب أن تفهم أولًا بعضًا من مفاهيم React الأساسية، مثل JSX والمكوّنات والحالة ‎state‎ والخاصيات ‎props‎، لفهم البنية الأساسية لتطبيق React Native. إذا كانت لديك خبرة سابقة مع React، فلا تزال بحاجة إلى معرفة بعض الأمور الخاصة بإطار عمل React Native، كالمكونات الأصيلة native components مثلًا. هذا الدليل التطبيقي موجّه إلى جميع الفئات، سواء كانت لديك تجربة مع React أو لا.

مرحبًا بالعالم Hello World

باتباع تقاليد من سبق، سنبدأ أولا ببناء تطبيقٍ الغرض الوحيد منه هو عرض جملة "مرحبًا بالعالم Hello World". إليك الشيفرة:

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

يمكنك تعديل عينة الشيفرة البرمجية مباشرة في محاكي الويب. يمكنك أيضًا لصقها في ملف ‎App.js‎ لإنشاء تطبيق حقيقي على جهازك المحلي.

شرح الشيفرة

نحتاج أولًا إلى استيراد React لنتمكّن من استخدام JSX، والتي ستُحوَّل بعد ذلك إلى المكونات الأصيلة لكل منصة.
استوردنا المكوّنين Text و View من react-native في السطر الثاني من الشيفرة السابقة.

ثم ستجد الدالة HelloWorldApp، وهي مكون دالة functional component وتتصرف هذه الدالة بالطريقة نفسها في React للويب. تعيد هذه الدالة مكون View مع بعض الأنماط والمكوّن Text كابنٍ لها.

يسمح المكون Text بتصيير render نص، بينما يصيّر المكوّن View حاوية. طُبِّقت أنماط متعددة على هذه الحاوية، إذًا لنحلل عمل كل نمط منها.

النمط الأول هو flex: 1، حيث ستحدّد الخاصية flex كيف "تملأ" عناصرك المساحة المتوفرة اعتمادًا على المحور الرئيسي. بما أن لدينا حاوية واحدة فقط، لذلك ستشغل هذه الحاوية كل المساحة المتاحة للمكون الأب، وبما أنها المكون الوحيد في هذه الحالة، فستأخذ كل مساحة الشاشة المتاحة.

النمط التالي هو justifyContent: "center"‎. يؤدي هذا النمط إلى محاذاة العناصر الأبناء للحاوية في مركز محور الحاوية الرئيسي. أخيرًا، لدينا النمط alignItems: "center"‎، والذي يؤدي إلى محاذاة عناصر الحاوية في مركز محور الحاوية الأفقي.

قد تبدو بعض الأجزاء في الشيفرة أعلاه مختلفة عن لغة JavaScript التي اعتدت عليها، لا تقلق، فهذه شيفرة JavaScript بنسختها ES2015 (التي تعرف كذلك بالرمز ES6)، وهي نسخة جديدة من JavaScript تُضيف مجموعة من التحسينات التي أصبحت الآن جزءًا من معيار JavaScript الرسمي، لكنّها غير مدعومة على جميع المتصفّحات، لذلك لا تُستخدَم عادةً في تطوير الويب. React Native يدعم ES2015 افتراضيًّا، لذا يُمكنك استخدام الميّزات الجديدة من JavaScript دون القلق بشأن التوافق. الجملُ ‎from‎و ‎import‎ و ‎class‎ و‎extends‎ في المثال أعلاه كلها ميزات ES2015. إن لم تعرف ميّزات النسخة الجديدة من JavaScript، فربّما يُمكنك تعلّمها فقط من خلال قراءة شيفراتٍ برمجيّةٍ كالشيفرة البرمجية أعلاه. أو انظر هذه السلسلة من الدروس، إضافة إلى أنّ توثيق JavaScript في الموسوعة يُغطّي ميّزات ES6 كذلك (استعن بمربّع البحث للوصول إلى صفحات معيّنة).

أما الشيء الآخر غير المعتاد في الشيفرة أعلاه فهو الجزء ‎<View><Text>Hello world!</Text></View>‎. هذه شيفرة JSX وهي بنيةٌ برمجيّةٌ syntax لتضمين XML داخل شيفرة JavaScript. تَستخدم العديد من أطر العمل لغة قوالب templating language خاصة تسمح لك بتضمين شيفرة برمجيّة داخل لغة هيكلة markup language. ويحدث عكس ذلك في شيفرة React. إذ تتيح لك JSX كتابة لغة هيكلة داخل شيفرة برمجيّة. الشيفرة مشابهة للغة HTML على الويب، باستثناء أنّ عناصر الويب مثل ‎<div>‎ أو ‎<span>‎ تُستبدَل بمكونات React. في هذه الحالة، ‎<Text>‎ هو مكونٌ أساسي يُستخدَم لعرض مقطعٍ نصيٍّ، أمّا ‎View‎ فهو مكوّن يقوم مقام ‎<div>‎ أو ‎<span>‎.

المكوّنات Components

تُعرِّف الشيفرة أعلاه مكوّنًا جديدًا باسم ‎HelloWorldApp‎. ستُنشئ العديد من المكونات الجديدة أثناء تطويرك للتطبيقات بإطار عمل React Native. كلّ ما تراه على الشاشة هو مكوّنٌ من هذه المكونات (مثل الأزرار ومربعات الإدخال والصور وغيرها).

الخاصيات Props

يمكن تخصيص معظم المكونات عند إنشائها باستخدام معاملات مختلفة، حيث تسمّى معاملات الإنشاء هذه بالخاصيات props.

يمكن لمكوناتك الخاصة أيضًا استخدام الخاصيات props، إذ يتيح لك ذلك إنشاء مكون واحد يمكن استخدامه في أماكن مختلفة من تطبيقك، ومع خاصيات مختلفة قليلًا في كل مكان مختلف. يُشار إلى هذه الخاصيات بالشكل props.YOUR_PROP_NAME في مكونات الدالة أو بالشكل this.props.YOUR_PROP_NAME في مكونات الصنف الخاصة بك. اطّلع على المثال التالي:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}

const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

export default LotsOfGreetings;

يسمح استخدام الاسم name كخاصية بتخصيص المكون Greeting، لنتمكّن من إعادة استخدام هذا المكون لكل التحيات greetings. يستخدم هذا المثال أيضًا المكوّن Greeting في JSX، وهذا ما يجعل React رائعةً للغاية.

الشيء الجديد الآخر هو المكون View الذي يُعَد مفيدًا كحاوية للمكونات الأخرى بهدف التحكم في النمط والتخطيط.

يمكنك إنشاء مجموعة متنوعة من الشاشات الثابتة باستخدام الخاصيات props ومكونات Text و Image و View الأساسية، لكن يجب أن تعرف المزيد حول الحالة State لمعرفة كيفية تغيير تطبيقك بمرور الوقت.

الحالة State

تسمح الحالة state لمكونات React بتغيير مخرجاتها بمرور الوقت استجابةً لإجراءات المستخدم واستجابات الشبكة وأي شيء آخر، بخلاف الخاصيات التي تكون قابلة للقراءة فقط ولا يجب تعديلها.

الفرق بين الحالة والخاصيات في React

الخاصيات في مكوِّن React هي المتغيرات التي نمررها من مكوّن أب إلى مكوّن ابن. أما الحالة فهي أيضًا متغيرات لكنها لا تُمرَّر كمعاملات حيث يهيّئها ويديرها المكوّن داخليًا.

هل توجد اختلافات بين React و React Native في التعامل مع الحالة؟

// ‫مثال ReactJS لعدّاد Counter باستخدام الخطّافات Hooks

import React, { useState } from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

// ‫مثال React Native لعّداد Counter باستخدام الخطّافات Hooks

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native أنماط
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

لا يوجد فرق في التعامل مع الحالة بين React و React Native كما هو موضح أعلاه. يمكنك استخدام حالة المكونات الخاصة بك في كل من مكونات الدالة ومكونات الصنف باستخدام الخطّافات hooks. سنعرض في المثال التالي مثال العدّاد counter نفسه ولكن باستخدام الأصناف classes:

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'

class App extends Component {
  state = {
    count: 0
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
        >
         <Text>Click me</Text>
        </TouchableOpacity>
        <View>
          <Text>
            You clicked { this.state.count } times
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 10
  }
})

export default App;

مصادر

صفحة Learn the Basics في توثيق React Native الرسمي.