React-Native重新渲染平面列表

Question

從另一個頁面返回后，我無法將數據保存在我的Flatlist中。 我的情況如下：

1. 用戶轉到主頁並滾動瀏覽20個項目
2. 用戶使用react-native-router-flux單擊其個人資料選項卡更改頁面
3. 用戶單擊主頁選項卡將其帶回到列表，但是列表重新呈現並從頂部開始。

如何停止重新渲染並再次獲取相同的數據？

componentDidMount() {
    this.makeRemoteRequest();
}

makeRemoteReuest以5為批次從firebase中獲取我的數據並設置數據：[]

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

我嘗試使用下面的方法，但是當我導航離開並返回數據時，不確定是否正確。 我想保留數據，以便頁面與離開時的頁面完全相同。

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

我的清單：

<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>

謝謝你的幫助！

Answer 1

很久以前就為愚蠢的項目編碼，也許這可以幫助您

視圖：使用onLayout屬性獲取y軸

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

功能：存儲y軸； 在這里我已經使用了領域數據庫

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

AutoScroll方法 ：在這里，我使用了ScrollView中的scrollTo方法，可以使用其引用使用任何方法

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

注意：在componentDidMount中調用_scrollTo方法