React-Native 重新渲染 Flatlist
React-Native re-render Flatlist
从另一个页面返回后,我无法将数据保存在平面列表中。我的场景如下:
- 用户转到主页并滚动浏览 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>
感谢您的帮助!
为愚蠢的项目编码了很久,也许这可以帮助你
视图: 使用 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方法
从另一个页面返回后,我无法将数据保存在平面列表中。我的场景如下:
- 用户转到主页并滚动浏览 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>
感谢您的帮助!
为愚蠢的项目编码了很久,也许这可以帮助你
视图: 使用 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方法