所以我开始从视频中学习react-native,他们使用了ListView,但ListView很快就会被弃用并将被删除。我知道 FlatList 将是正确的替代品,但作为初学者,我无法迁移到 Flatlist。
import React, { Component } from "react";
import { ListView } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';
class LibraryList extends Component {
componentWillMount() {
const ds = new ListView.DataSource({
rowHasChanged: (r1,r2) => r1 !==r2
});
this.dataSource =ds.cloneWithRows(this.props.libraries);
}
renderRow(library) {
return <ListItem library = { library } />;
}
render() {
return(
<ListView
dataSource = {this.dataSource}
renderRow = {this.renderRow}
/>
);
}
}
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps) (LibraryList);
最佳答案
欢迎来到 stackoverflow。
迁移应该非常简单,您不再需要dataSource
。您可以将项目数组直接传递给组件。
import React, { Component } from "react";
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';
class LibraryList extends Component {
renderRow({item}) {
return <ListItem library = { item } />;
}
render() {
return(
<FlatList
data = {this.props.libraries}
renderItem = {this.renderRow}
/>
);
}
}
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps) (LibraryList);
标题转到文档 here了解更多信息。
关于javascript - React Native ListView 到 FlatList 迁移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52905081/