کانال تلگرام

آشنایی مقدماتی با React Native

تاریخ : ۲۵ شهریور ۱۳۹۹
نویسنده : آروین سعادت نیا
دسته بندی ها : جاوا اسکریپت , react

برای کار با React Native ، باید درکی از اصول اولیه جاوا اسکریپت داشته باشید. اگر دانشی در این زمینه ندارید از دوره آموزش جاوا اسکریپت در لرن سورس استفاده کنید. با استفاده از React می توانید کامپوننت ها را با استفاده از کلاس ها یا توابع ایجاد کنید.

در اصل کامپوننت های کلاس تنها کامپوننت هایی هستند که میتوانند یک وضعیت(State) داشته باشند. اما از زمان معرفی Hooks API در ری اکت، می توانید وضعیت ها را به کامپوننت های تابعی هم اضافه کنید.

IntroductionReact1

شروع کار

ساده ترین راه برای شروع کار استفاده از Expo CLI است. Expo مجموعه ای از ابزارهای ساخته شده در زمینه React Native است. مطمئن شوید که NodeJs را روی سیستم خود نصب کرده اید، سپس دستور زیر را اجرا کنید:

$ npm install -g expo-cli

برای ایجاد یک پروژه جدید دستور زیر را اجرا کنید:

$ expo init newProject
$ cd newProject
$ npm start

این دستورات یک سرور توسعه را برای شما راه اندازی میکند.

کامپوننت ها

در توسعه اندروید، شما view هایی را با زبان کاتلین یا جاوا می نویسید. در توسعه iOS ، شما از Swift یا Objective-C استفاده می کنید. وقتی از React Native استفاده میکنید، میتوانید این View ها را با استفاده از جاوا اسکریپت و با کامپوننت های ری اکت فراخوانی کنید.

کامپوننت های اصلی

React Native برای همه موارد از کنترل های فرم گرفته تا شاخص های فعالیت دارای کامپوننت های هسته است. می توانید درباره آنها در مستندات React Native بخوانید. برخی از کامپوننت های مشترک در زیر آورده شده است:

  • View
  • Text
  • Image
  • ScrollView
  • TextInput

اولین کامپوننت خود را ایجاد کنید

نحوه انجام این کار به شرح زیر است: ابتدا "React" و سپس "React Native" را import کنید:

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

سپس به شکل زیر مانند یک تابع معمولی در جاوا اسکریپت، کامپوننت خود را ایجاد میکنید:

const Article = () => {};

سپس میتوانید عناصری را به این کامپوننت اضافه کنید، برای مثال میتوانید، متن، تصاویر را اضافه کنید:

const Article = () => {
  return <Text>Hello, I am an Article!</Text>;
};

برای استفاده از این کامپوننت سپس باید آن را export کنید:

const Article = () => {
  return <Text>Hello, I am an Article!</Text>;
};export default Article;

JSX

ری اکت نیتیو و ری اکت از JSX استفاده می کنند، JSX نحوی است که به شما امکان می دهد عناصر را درون جاوا اسکریپت بنویسید. هر عبارت جاوا اسکریپت بین بریس ها کار میکند، برای مثال:

const Article = () => {
  const number = 1;
  return <Text>Hello, I am an Article number {number}</Text>;
};export default Article;

Props

Props مخفف واژه properties است ، این Props ها را می توانید از طریق کامپوننت ها انتقال دهید، به عنوان مثال داده ها را نمایش دهید:

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

State یا وضعیت

State محلی برای ذخیره سازی یک کامپوننت است، State ها برای مدیریت داده هایی که با گذشت زمان تغییر میکنند و یا ناشی از تعامل با کاربر هستند، مفیدند. State به کامپوننت های شما حافظه می بخشند. بیایید ببینیم که State ها چگونه کار میکنند. ابتدا باید State را import کنیم:

import React, { useState } from 'react';

سپس یک متغیر جدید اضافه میکنیم:

const Cat = (props) => { const [isHungry, setIsHungry] = useState(true);  return (
    <View>
      <Text>Hello, I am {props.name} and I am {isHungry ? "hungry" : "full"}!!</Text>
    </View>
  );
}

Text Input

عنصر "<TextInput>" به کاربران امکان می دهد، متنی را در برنامه شما وارد کنند. می توانید متن وارد شده را در State ذخیره سازی کنید:

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

کامپوننت خود را ایجاد کنید:

const Cat = (props) => {
  const [text, setText] = useState('');
   
    return (      <View>
        <TextInput
          onChangeText={text => setText(text)}
        />
      </View>     );
   }

در مثال بالا وقتی عنصر "InputText" تغییر می کند ، مقدار State با مقدار جدید جایگزین میشود.

List Views

کامپوننت FlatList فهرستی از تغییرات را نمایش می‌دهد , اما شبیه داده های ساختاریافته است .FlatList برای فهرست‌های طولانی از داده‌ها خوب کار می‌کند، جایی که تعداد آیتم‌های ممکن است در طول زمان تغییر کند. مثالی از یک FlatList در زیر آمده است:

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}export default FlatListBasics;

 

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید