آموزش لیست ویو در برنامه نویسی React NativeReviewed by صابر بوستانی on May 1Rating: 5.0
آموزش لیست ویو در برنامه نویسی React Native

آموزش لیست ویو در برنامه نویسی React Native

در خدمت شما عزیزان هستیم با  آموزش لیست ویو در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه هشتم آموزش ریکت نیتیو،لیست ویو (ListView) یکی از قدیمی ترین و پرکاربردترین کامپوننت ها در توسعه اپلیکیشن های Android و Ios است. لیست ویو ساده ترین راه برای نمایش داده های چندگانه در یک صفحه نمایش با قابلیت scroll است. تا نتها با ما همراه باشید…

آموزش لیست ویو در برنامه نویسی React Native

بدون معطلی بریم سراغ آموزش و کارمون رو شروع کنیم. ابتدا یک پروژه جدید ایجاد کنید. ما List را در کامپوننت Home وارد می کنیم و آن را روی صفحه نمایش نشان می دهیم.

App.js

برای ایجاد یک ListView ،از روش ()map استفاده خواهیم کرد. این یک آرایه ای از موارد را تکرار می کند و هر کدام را رندر می کند.

 

List.js

هنگامی که ما برنامه را اجرا می کنیم، لیستی از اسامی را خواهیم دید.

شما می توانید بر روی هر یک از آیتم های موجود در لیست کلیک کنید تا هشدار را با نام نشان دهد.

 

مثال 2 از آموزش ListView در react native

ساخت پروژه جدید و اضافه کردن کامپوننت های AppRegistry, StyleSheet, View, Alert, ListView , Text در بلاک import

ایجاد constructor در کلاس اصلی با پارامتر props

ایجاد یک تابع به نام ListViewItemSeparator . با استفاده از این تابع بین آیتم های ListView یک جداکننده بصورت خط ایجاد میکنیم.

ایجاد تابع GetListViewItem برای نمایش نام آیتم های ListView

اضافه کردن View در بلاک render return

ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent

اضافه کردن کامپوننت ListView دورن View

dataSource: فراخوانی data source که با استفاده از state تعریف کردیم.

renderSeparator: فراخوانی تابع ListViewItemSeparator برای نمایش خط جداکننده بین آیتم ها

renderRow: نمایش اطلاعات با استفاده از کامپوننت Text

onPress: فراخوانی تابع GetListViewItem

کد کامل برنامه در فایل index.js

ممنون از اینکه ما رو تا انتهای آموزش ListView در برنامه نویسی React Native همراهی نمودید. لیست جلسات قبل رو میتونید در زیر مشاهده نمایید.

 

لیست جلسات قبل آموزش React Native

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native