使用react native中的对象数组呈现项目平面列表

import React, { Component } from 'react';
import { View, FlatList, Text, Image } from 'react-native';

class ProjectList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: [
        { id: 1, title: 'Project 1', description: 'This is project 1', image: 'project1.jpg' },
        { id: 2, title: 'Project 2', description: 'This is project 2', image: 'project2.jpg' },
        { id: 3, title: 'Project 3', description: 'This is project 3', image: 'project3.jpg' },
      ],
    };
  }

  renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Image source={{ uri: item.image }} style={styles.image} />
      <View style={styles.textContainer}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.description}>{item.description}</Text>
      </View>
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.projects}
          renderItem={this.renderItem}
          keyExtractor={(item) => item.id.toString()}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    padding: 10,
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  image: {
    width: 50,
    height: 50,
    marginRight: 10,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 14,
    color: 'gray',
  },
};

export default ProjectList;