۲۹
فروردین

جلسه ۰۸ : آشنایی با ListView در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. همونطور که مشاهده نمودید در جلسه پیشین ، آشنایی با Flexbox و طرح بندی یا Layout در React Native را داشتیم. مبحث رو با آشنایی با ListView در React Native ادامه خواهیم داد.پس بدون معطلی میریم سر وقت نحوه نوشتن کدها.

آشنایی با ListView در React Native

در این فصل، ما به شما نحوه ایجاد لیست ویو در React Native را نشان خواهیم داد. ما List را در کامپوننت Home وارد می کنیم و آن را روی صفحه نمایش نشان می دهیم.

App.js

مثال :

import React from 'react'
import List from './List.js'

const App = () => {
   return (
      <List />
   )
}
export default App

import React from 'react'

import List from './List.js'

const App = () => {

return (

)

}

export default App

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

List.js

مثال :

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
   
class List extends Component {
   state = {
      names: [
         {
            id: 0,
            name: 'Ben',
         },
         {
            id: 1,
            name: 'Susan',
         },
         {
            id: 2,
            name: 'Robert',
         },
         {
            id: 3,
            name: 'Mary',
         }
      ]
   }
   alertItemName = (item) => {
      alert(item.name)
   }
   render() {
      return (
         <View>
            {
               this.state.names.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}>
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}
export default List

const styles = StyleSheet.create ({
   container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#d9f9b1',
      alignItems: 'center',
   },
   text: {
      color: '#4f603c'
   }
})

import React, { Component } from 'react'

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

class List extends Component {

state = {

names: [

{

id: 0,

{

id: 1,

{

id: 2,

{

id: 3,

}

]

}

alertItemName = (item) => {

alert(item.name)

}

render() {

return (

<View>

{

this.state.names.map((item, index) => (

<TouchableOpacity

key = {item.id}

style = {styles.container}

onPress = {() => this.alertItemName(item)}>

{item.name}

</Text>

</TouchableOpacity>

))

}

</View>

)

}

export default List

const styles = StyleSheet.create ({

container: {

padding: 10,

marginTop: 3,

backgroundColor: '#d9f9b1',

alignItems: 'center',

text: {

color: '#4f603c'

}

})

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

آشنایی با ListView در React Native

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

آشنایی با ListView در React Native

کلام پایانی

مبحث رو با آشنایی با ListView در React Native ادامه دادیم و همونطور که مشاهده شد نحوه ایجاد لیست رو در این قسمت داشتیم. در ادامه به Text Input در راکت نیتیو خواهیم پرداخت. همراهمون باشید.

QR: جلسه ۰۸ : آشنایی با ListView در React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۸ : آشنایی با ListView در React Native

مقدمه

آشنایی با ListView در React Native

App.js

List.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ