Question

从其他页面返回后，我无法将数据保存在我的Flatlist中。我的方案如下：

用户访问主页并滚动浏览20个项目
用户使用react-native-router-flux
用户单击主页选项卡将其带回列表，但列表会重新呈现并从顶部开始。

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

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 Prop获取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

1 个答案: