آموزش ListView در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

آموزش ListView در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ListView در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

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

App.js

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

const App = () =&gt; {
   return (
      &lt;List /&gt;
   )
}
export default App

import React from 'react'

import List from './List.js'

const App = () => {

return (

)

}

export default App

برای ایجاد لیست، از متد ()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) =&gt; {
      alert(item.name)
   }
   render() {
      return (
         &lt;View&gt;
            {
               this.state.names.map((item, index) =&gt; (
                  &lt;TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() =&gt; this.alertItemName(item)}&gt;
                     &lt;Text style = {styles.text}&gt;
                        {item.name}
                     &lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
               ))
            }
         &lt;/View&gt;
      )
   }
}
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 در برنامه نویسی ریکت نیتیو

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

آموزش ListView در برنامه نویسی ریکت نیتیو

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

آموزش ListView در برنامه نویسی ریکت نیتیو

آموزش ListView در برنامه نویسی ریکت نیتیو

App.js

List.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش ListView در برنامه نویسی ریکت نیتیو

App.js

List.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه