Использование React Native Cards с ListItem

Question

Я работал над кодом, который отображает массив с 4 людьми, имеющими имя, описание и изображение. Я использую его с Card, ListItem и FlatList. Мне как-то удалось что-то отобразить, но моя проблема в том, что эта информация, хранящаяся в этом массиве, отображается на одной карте, т.е. каждая карта имеет название, имя, описание и изображение карты, но я хочу отобразить все 4 элемента в массиве в одна-единственная карта это мое намерение вместо того, чтобы иметь отдельные карты в каждом элементе этого массива. Может ли кто-нибудь помочь, как я могу отобразить все 4 элемента на одной карточке? ниже мой код:

Также, если я хочу стилизовать элемент «title» в ListItem, как мне это сделать?

AboutComponent. js

import React, { Component } from 'react' ;
import { FlatList, View, Text } from 'react-native' ;
import { Card, ListItem } from 'react-native-elements';
import { LEADERS } from '../shared/leaders';


function RenderLeader(props) {
    //get the leaders array
    const leaders = props.leaders;

    const renderLeaderItem = ({item, index}) => {
        return (
            <Card title="Corporate Leadership" >
            {
                <ListItem   
                    key={index}
                    title={item.name}
                    subtitle={item.description}
                    //hideChevron={true}         
                    leftAvatar={{source: require('./images/jack.png') }}
                        />
            }
          </Card>
        )
    }
    return (
        <FlatList 
            data= {leaders}
            renderItem={renderLeaderItem}
            keyExtractor={Item => Item.id.toString() }
            />
        )
}

class About extends Component {
    constructor(props) {
        super(props);

        this.state = {
            leaders : LEADERS,
            history: HistoryElement
        }
    }

    //setup the navigation for the current class [Dishdetail]
    static navigationOptions = {
        title : 'About'
    }

    render(){
       return (
        <>
           <History history={this.state.history} />
           <RenderLeader leaders={this.state.leaders} />    
        </>
       )
    }
}

export default About;

Answer 1

Вам нужно будет обернуть плоский список внутри карточки вместо того, чтобы оборачивать элемент списка внутри карточки, что даст вам ожидаемый результат. И заголовок карты можно стилизовать с помощью свойства titleStyle карты. Вы можете увидеть полный код ниже.

function RenderLeader(props) {
  //get the leaders array
  const leaders = props.leaders;

  const renderLeaderItem = ({ item, index }) => {
    return (
      <ListItem
        key={index}
        title={item.name}
        subtitle={item.description}
        //hideChevron={true}
        leftAvatar={{ source: require('./images/jack.png') }}
      />
    );
  };
  return (
    <Card title="Corporate Leadership" titleStyle={{color:'red'}}>
      <FlatList
        data={leaders}
        renderItem={renderLeaderItem}
        keyExtractor={(Item) => Item.id.toString()}
      />
    </Card>
  );
}