React Native - ListView

• 

  简述

  在本章中，我们将向您展示如何在 React Native 中创建列表。我们将导入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'
     }
  })
  

  当我们运行应用程序时，我们将看到名称列表。

  

  您可以单击列表中的每个项目以触发带有名称的警报。