React Native,从 ListView 到 FlatList
React Native, from ListView to FlatList
我想用 React native 和 firebase 做一个带有 feed 的应用程序。有新帖子、修改后的帖子和无限滚动。在尝试使用 FlatList 失败后,我设法使用 ListView 完成了:
<ListView
automaticallyAdjustContentInsets={false}
initialListSize={1}
dataSource={this.state.dataSource}
renderRow={this.renderItem}
renderFooter={this.renderFooter}
onEndReached={this.onEndReached}
onEndReachedThreshold={1}
/>
与
ComponentDidMount() { firebase.database().ref(`/posts/${this.props.auth.group}`)
.limitToLast(this.state.counter)on('value', async snapshot => {
if (snapshot.val()) {
this.setState({
dataSource:
this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))) })
}
和
onEndReached = () => {
this.setState({ counter: this.state.counter + 7 });
this.setState({ isLoading: true });
firebase.database().ref(`/posts/${this.props.auth.group}`).off();
firebase.database().ref(`/posts/${this.props.auth.group}`).orderByChild('updatedAt').limitToLast(this.state.counter+7).on('value',
(snapshot) => {
if (snapshot.val()) {
this.setState({ isEmpty: false });
this.setState({
dataSource: this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))),
});
}
}
}
是否可以用 FlatList 做同样的事情?
我无法正确更新 this.data(我将其提供给 flatList),除非重新呈现(和闪烁)所有帖子并同时更新新帖子。
您可以使用 FlatList 的 extraData 属性实现相同的效果。
https://facebook.github.io/react-native/docs/0.56/flatlist#extradata
我想用 React native 和 firebase 做一个带有 feed 的应用程序。有新帖子、修改后的帖子和无限滚动。在尝试使用 FlatList 失败后,我设法使用 ListView 完成了:
<ListView
automaticallyAdjustContentInsets={false}
initialListSize={1}
dataSource={this.state.dataSource}
renderRow={this.renderItem}
renderFooter={this.renderFooter}
onEndReached={this.onEndReached}
onEndReachedThreshold={1}
/>
与
ComponentDidMount() { firebase.database().ref(`/posts/${this.props.auth.group}`)
.limitToLast(this.state.counter)on('value', async snapshot => {
if (snapshot.val()) {
this.setState({
dataSource:
this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))) })
}
和
onEndReached = () => {
this.setState({ counter: this.state.counter + 7 });
this.setState({ isLoading: true });
firebase.database().ref(`/posts/${this.props.auth.group}`).off();
firebase.database().ref(`/posts/${this.props.auth.group}`).orderByChild('updatedAt').limitToLast(this.state.counter+7).on('value',
(snapshot) => {
if (snapshot.val()) {
this.setState({ isEmpty: false });
this.setState({
dataSource: this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))),
});
}
}
}
是否可以用 FlatList 做同样的事情?
我无法正确更新 this.data(我将其提供给 flatList),除非重新呈现(和闪烁)所有帖子并同时更新新帖子。
您可以使用 FlatList 的 extraData 属性实现相同的效果。
https://facebook.github.io/react-native/docs/0.56/flatlist#extradata