从TouchableOpacity / FlatList

Question

我想显示无限滚动中的分页数据，但是我在定义显示时如何使其正确感到非常困惑。我尝试通过Flatlist进行此操作，但是我需要“输入”显示的植物，因此可能需要使用TouchableOpacity（就像以前一样，但是没有分页，这是必需的）。我正在使用本教程https://www.youtube.com/watch?v=rY0braBBlgw。没有错误，但应用程序未显示任何内容。我想至少看到植物的名称和图像。我需要TouchableOpacity吗？如果可以，该如何显示？

constructor(props) {
  super(props);
  this.state = {
    loading: false,
    data: [],
    page: 1,
    error: null,
    refreshing: false
   };
 }

 componentDidMount(){
   this.fetchData();
 }

 fetchData = () => {
   const { page } = this.state;
   const url = `https://trefle.io//api/plants?token=*****************&fbclid=IwAR3FY03yEVzS77Ca1Q9TIbMdMlJhXtpOjhcqcD-MJHAYJXCNcdA3UrJ2p9Q&page=${page}`
  this.setState({ loading:true });
   fetch(url)
    .then(response => response.json())
    .then(response => {
      this.setState({
        loading: false,
        data: [...this.state.data, ...response.results],
        error: responseJson.error || null,
        loading: false,
        refreshing: false
   })
 })
 .catch(error=> {
   this.setState({error, loading: false, refreshing: false});
 });
 }

handleRefresh = () => {
  this.setState({
    page: 1,
    refreshing: true,
  },
    this.fetchData());
  };


handleLoadMore = () => {
  this.setState({
    page: this.state.page + 1
  }, 
    this.fetchData());
  };

立即显示

  <FlatList
     data = {this.state.data}
     renderItem= {({item}) => (
       <ListItem
                   />
        )}
     keyExtractor= {item=>item.id} 
     onRefresh={this.handleRefresh}
     refreshing={this.state.refreshing}
     onEndReached={this.handleLoadMore}
     onEndReachedThreshold={10}/>

上一个

<TouchableOpacity style={styles.card} onPress={() => 
 this.props.navigation.navigate('CatalogPlant',{linkPlant: data.item.link})} >
        <Image style={styles.cardImage} source={require('./images/flower.jpg')}/>
        <Text style={styles.cardText} >{data.item.scientific_name}</Text> 
 </TouchableOpacity>