प्रतिक्रियाशील मूल - ListView

इस अध्याय में, हम आपको दिखाएंगे कि कैसे रिएक्ट नेटिव में एक सूची बनाएं। हम आयात करेंगेList हमारे में Home घटक और इसे स्क्रीन पर दिखाएं।

App.js

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

const App = () => {
   return (
      <List />
   )
}
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) => {
      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'
   }
})

जब हम ऐप चलाते हैं, तो हम नामों की सूची देखेंगे।

आप सूची में प्रत्येक आइटम पर क्लिक करके नाम के साथ अलर्ट ट्रिगर कर सकते हैं।