react-native - 从 flatlist 切换到 Listitem 并检索数据

Question

我需要一只手来转换我的代码。目前我正在使用 API 来检索产品列表。然后我使用平面列表进行显示。我收到了通过 listitem 更改我的平面列表的指令，但这对我来说变得复杂了。我在转换代码以获取和显示数据时遇到问题。我不知道在列表项中在哪里调用this.state.displayArray 。我已经尝试了一些测试，但我迷失在我的代码中......我想知道你是否可以帮助我。感谢您一直以来的努力以及您可以给我的解释。

import React, { Component } from "react";
import { FlatList, SafeAreaView, Button, Text, View, TouchableOpacity } from 'react-native';
import { getProducts } from '../../../src/common/Preferences';
import styles from '../../../assets/styles';
import i18n from '../../../src/i18n';

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.productItem, style]}>
    <Text style={[styles.h4, {textAlign: "left"}]}>
    {item.name}
    </Text>
  </TouchableOpacity>
);

export default class Products extends Component {
  constructor(props) {
    super(props);
      this.state = {
        selectedId: '',
        setSelectedId: '',
        listData: '',
        currentPage: 1,
        loadMoreVisible: true,
        loadMoreVisibleAtEnd: false,
        displayArray: []
      }
    };

  initListData = async () => {
    let list = await getProducts(1);
   
    if (list) {
      this.setState({
        displayArray: list,
        loadMoreVisible: (list.length >= 15 ? true : false),
        currentPage: 2
      });
      console.log(this.state.displayArray, 'dans initListData')
    }
  };

  setNewData = async (page) => {
    let list = await getProducts(parseInt(page));

    if (list) {
      this.setState({
        displayArray: this.state.displayArray.concat(list),
        loadMoreVisible: (list.length >= 15 ? true : false),
        loadMoreVisibleAtEnd: false,
        currentPage: parseInt(page)+1
      });
    }
  };

  loadMore() {
   this.setNewData(this.state.currentPage);
  }

  displayBtnLoadMore() {
    this.setState({
      loadMoreVisibleAtEnd: true
    });
  }

  async UNSAFE_componentWillMount() {
    this.initListData();
    console.log(this.state.displayArray, 'dans componentWillMount')    
  }

  render() {
    console.log('displayArray', this.state.displayArray)
    return (
      <View style={{flex: 1}}>
      <Text>{"\n"}</Text>
      <Text>{"\n"}</Text>
        {this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
          <View style={{ flex: 1, marginBottom: 100 }}>
            <SafeAreaView style={styles.container}>
              <FlatList
                data={this.state.displayArray}
                //extraData={this.selectedId}
                //onEndReached={() => this.displayBtnLoadMore()}
                renderItem={({item})=>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                  <Item
                    item={item}
                    onPress={() => this.props.navigation.navigate('ProductDetails', {productId: parseInt(item.id)})}
                  />
                </View>
                }
                keyExtractor={item => "product-" + item.id.toString()}
                style={{width:"90%"}}
              />
              {this.state.loadMoreVisible === true && this.state.loadMoreVisibleAtEnd === true ? (
                  <Button title=" + " onPress={()=>{this.loadMore()}}></Button>
                ) : null
              }
              <View style={styles.container}>
                <Text>{"\n"}</Text>
                <TouchableOpacity
                  style={styles.touchable2}
                  onPress={() => this.props.navigation.goBack()}
                >
                  <View style={styles.container}>
                    <Button 
                      color="#F78400" 
                      title= 'Back' 
                      onPress={() => this.props.navigation.goBack()}>BACK              
                    </Button>
                  </View>
                </TouchableOpacity>
              </View>
              <Text>{"\n\n"}</Text>
            </SafeAreaView>
          </View>
        ) : (
          <View style={styles.container}>
            <Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("products.searching") : i18n.t("products.nodata")) + "\n\n\n"}</Text>           
                <Button
                  color="#F78400"
                  title= 'Back' 
                  onPress={() => this.props.navigation.goBack()}>BACK              
                </Button>    
          </View>
        )}
    </View>
    );
  };
}

我应该使用而不是 flalist ：

import { ListItem, Icon } from 'react-native-elements'
<View>
  {
    list.map((item, i) => (
      <ListItem key={i} bottomDivider>
        <Icon name={item.icon} />
        <ListItem.Content>
          <ListItem.Title>{item.title}</ListItem.Title>
        </ListItem.Content>
      </ListItem>
    ))
  }
</View>