React-Native 重新渲染 Flatlist

Question

从另一个页面返回后，我无法将数据保存在平面列表中。我的场景如下：

用户转到主页并滚动浏览 20 个项目
用户使用 react-native-router-flux 单击他们的配置文件选项卡更改页面
用户单击主页选项卡将他们带回列表，但列表会重新呈现并从顶部开始。

如何停止重新渲染并再次获取相同的数据？

componentDidMount() {
    this.makeRemoteRequest();
}

makeRemoteReuest 从 firebase 以 5 批次获取我的数据并设置数据：[]

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轴；在这里我使用了 realm db

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

AutoScroll 方法：这里我使用了 ScrollView 的 scrollTo 方法，你可以使用他们的 ref

的任何方法

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

注意：调用componentDidMount中的_scrollTo方法

React-Native 重新渲染 Flatlist

React-Native re-render Flatlist

react-native

react-native-flatlist