React Native列表ListView - React Native实战教程

上一章React
Native实战教程请查看：React
Native使用Flexbox布局

在本章中，我们将向你展示如何在React Native中创建列表ListView，我们将导入Home组件中的List并在屏幕上显示它。

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

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

猜你喜欢