React-Native重新渲染平面列表

Question

I'm having trouble keeping the data in my Flatlist after coming back from another page. My scenario is as follows:

1. User goes to homepage and scrolls through 20 items
2. User clicks their profile tab changing page using react-native-router-flux
3. User clicks the home tab taking them back to the list however the list re-renders and starts from the top.

How can I stop this re-rendering and fetching the same data again?

componentDidMount() {
    this.makeRemoteRequest();
}

makeRemoteReuest gets my data from firebase in batches of 5 and sets data: []

data: [...this.state.data, ...results]

I've tried using the below but not sure if this is correct, when i navigate away and back the data re-renders. I want to keep the data so the page will be exactly the same as when it was left.

shouldComponentUpdate(nextProps, nextState) {
    if (JSON.stringify(this.state.data) !== JSON.stringify(nextState.data)) {
      return true;
    }
    return false;
}

My flatlist:

<View>
        <FlatList
          scrollsToTop={false}
          ref={(ref) => { this.flatListRef = ref; }}
          showsHorizontalScrollIndicator={false}
          onScroll={this.handleScroll}
          data={this.state.data}
          keyExtractor={item => item.key}
          ListFooterComponent={this.renderFooter()}
          onRefresh={this.handleRefresh}
          refreshing={this.state.newRefresh}
          onEndReached={this.handleEndRefresh}
          onEndReachedThreshold={0.05}
          getItemLayout={this.getItemLayout}
          renderItem={this.renderItem}
        />
        {this.state.refreshAvailable ? this.renderRefreshButton() : null}
      </View>

Thanks for any help!

Answer 1

Coded long back for the dumb project, maybe this can help you

The View: used onLayout Prop for getting the y-axis

   <ScrollView
   ref={(ref) => this.scrollTo = ref}
   contentContainerStyle={{margin:5,}}
   >
   <Card onLayout={(event) => this._findHeight(event.nativeEvent.layout, 'personal')}>
    <Personal review={true}/>
   </Card>
   </ScrollView>

The Function: stored the y-axis; here i have used realm db

    _findHeight = (e, name) => {
      const {x, y, width, height} = e;
      this.realm.write(() => {
         this.realm.create('yLocation',{names:name,yaxis:y}) : 
      });
    }

The AutoScroll Method : here i have used scrollTo method from ScrollView you can use any method using their ref

_scrollTo = (y) => {
  this.scrollTo.scrollTo({x:0,y:y,animated:true});
}

Note : Call _scrollTo method in componentDidMount