对本地搜索结果反应太大，需要分页

Question

i am new to this react native and i am require to develop a simple app to search something from given api. Given api does not have pages but count of results and sometimes the results that comes out is large

this case, my search result is loading while displaying some of the result from the api. I found out this to be very bad design for myself and i wanted to do something like load only 10 result first and when scroll until end will load another 10 results and keep on going with 10 results. I think this is call infinite scrolling?

during my search in google, i see alot of example but i am not sure how to implement this on my side instead. This is my search code.

import React, { Component } from 'react';
import { StyleSheet, Alert, Dimensions, Platform, View,TouchableOpacity,TouchableHighlight,FlatList  } from 'react-native'
import { Button,Header, Icon, Input, Item, Left, Right, Text,Thumbnail } from 'native-base'
import { ListItem, Avatar } from 'react-native-elements'


const { width, height } = Dimensions.get('window')
class Search extends Component {
  constructor(){
    super();
    this.state = {
      searchResult: [],
    };
  }

   static navigationOptions = {
   title: "Search Results",
             headerStyle: {
              backgroundColor: '#4050B5',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold'
    }
  };

  getSearchResult(searchURL){
    console.log("Search URL is => "+searchURL);
    return fetch(searchURL)
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({searchResult:responseJson.result});
    })
    .catch((error) => {
      console.error(error);
    });
  }

  configureSearchURL(props){
    const { navigation } = props;
    let selectedTitles = navigation.getParam('selectedTitles');
    let searchKeyword = navigation.getParam('searchKeyword');
    console.log("selectTitles => "+selectedTitles);
    console.log("searchKeyword => "+searchKeyword);
    let searchURL = 'https://imas-go.com/test_item_search.php?';
    let titleParameter = "";

    if(selectedTitles != null || selectedTitles != ""){
       for (let i=0;i<selectedTitles.length;i++){
        if(i==0){
          titleParameter+="vers[]="+selectedTitles[i];
        } else {
          titleParameter+="&vers[]="+selectedTitles[i];
        }
      }
      searchURL+=titleParameter;
    }

    if(searchKeyword.trim().length > 0){
      searchURL+="&name="+searchKeyword;
    }
    console.log("final search url => "+searchURL);
    this.getSearchResult(searchURL);
  }

  componentDidMount(){
   this.configureSearchURL(this.props);
  }

  keyExtractor = (item, index) => item.sno+item.name;

renderItem = ({ item }) => (
 <ListItem
      title= {item.name}
      subtitle={
        <View style={styles.subtitleView}>
          <Text style={styles.ratingText}>Ver: {item.ver}</Text>
          <Text style={styles.ratingText}>Price: {item.price}</Text>
          <Text style={styles.ratingText}>Stock: {item.stock}</Text>
        </View>
      }
     avatar={<Avatar
                large
                medium
                source={{uri: `https://imas-go.com/card_image/ws/front/${item.ver}/${item.cid}.jpg`}}
                onPress={() => console.log("Works!")}
              />}
    />
)   
  render() {

      return(
        <FlatList
      keyExtractor={this.keyExtractor}
      data={this.state.searchResult}
      renderItem={this.renderItem}
    />

        );
  }
}

styles = StyleSheet.create({
  subtitleView: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingTop: 5
  },
  ratingText: {
    paddingLeft: 10,
    color: 'grey'
  }
})

export default Search;

i have a page that searches with keywords and category and redirect to this search.js page and form the parameter for the api search url. Hope someone can help me in implement this

Answer 1

Try using flatlist, That will take a few set of data and lazy loads the rest.

https://facebook.github.io/react-native/docs/flatlist

Answer 2

You could create a new state called "currentView" which refers to this.currentView() like this:

this.state = {
  currentView: this.currentView(),
  currentPagination: []
}

And then you simply define a for loop like this:

currentView() {
 let pagination = 10; // Set how many you want to show each time
 let list = []; // The list you will render
 let currentPagination = this.state.currentPagination.length

 for (let i = 0; i < pagination; i++) {
     let arr = this.state.searchresults.slice(currentPagination)
     list.push(arr[i]);
 };
 this.setState({currentPagination: list})

 return list;
}

To make it load when you scroll you'll need to set something up in componentDidUpdate() , something like this:

componentDidUpdate() {
  let windowHeight = window.innerHeight;
  let scrollState = window.scrollY;
  let offset = 100; // If you want to start the load earlier than the bottom

  if (scrollState > windowHeight - offset) {
    this.currentView();
  }
}