错误:您的清单很大,更新速度很慢-确保您的renderItem函数呈现遵循React性能最佳实践的组件,例如PureComponent,shouldComponentUpdate等。
-v
"react-native": "0.59.8", "mobx": "^5.9.4", "mobx-react": "^5.4.3",
我已经研究了这个问题,但是答案对我没有用
平面列表
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
initialNumToRender={10}
refreshing={GozlemStore.getRefreshing}
//onRefresh={async () => GozlemStore.onRefreshx()}
data={GozlemStore.filtered}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
onEndReached={this.loadMore}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
/>
渲染项功能,在此功能中,我正在使用观察者对象进行监听。
renderItem = ({ item }) => { <Observer>...</Observer>}
为分页加载更多工作
loadMore = () => {
if (!this.onEndReachedCalledDuringMomentum) {
this.props.GozlemStore.loadMoreSideStore();
this.onEndReachedCalledDuringMomentum = true;
}
};
页面更改
@action loadMoreSideStore = () => {
this.page = this.page + 1;
};
@observable page = 1;
@computed get filtered() {
let filteredList = [];
....
if (filteredList.length > 0) {
let firstChar = this.turkceKarakter(this.filterTermValue)[0];
filteredList = filteredList.sort(function (a, b) {
if (a.ad < b.ad) { return -1; }
if (a.ad > b.ad) { return 1; }
return 0;
})
return filteredList;
}
return this.misafirList.slice(0, 25 * this.page);
}