React Native ListView 到 FlatList 迁移

Question

所以我开始从视频中学习 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);

Answer 1

欢迎使用 Whosebug。

迁移应该非常简单，您不再需要 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 以了解更多信息。

React Native ListView 到 FlatList 迁移

React Native ListView to FlatList Migration

javascript

reactjs

react-native

redux

react-native-flatlist