Native reagieren - ListView

In diesem Kapitel zeigen wir Ihnen, wie Sie in React Native eine Liste erstellen. Wir werden importierenList in unserer Home Komponente und zeigen Sie es auf dem Bildschirm.

App.js

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

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

Um eine Liste zu erstellen, verwenden wir die map()Methode. Dadurch wird ein Array von Elementen durchlaufen und jedes gerendert.

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'
   }
})

Wenn wir die App ausführen, wird die Liste der Namen angezeigt.

Sie können auf jedes Element in der Liste klicken, um eine Warnung mit dem Namen auszulösen.